I have a navigation menu on the left of my page. I put the menu in a collapsible container. When I scroll, the width of the menu changes. I want it to take up the whole grid column it is placed in. The resizing looks very bad (looks much worse when the browser window is large).
See jsfiddle: https://jsfiddle.net/nndpwzvj/
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title>Help Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="ME" />
<meta name="doc-version" content="0.01 alpha" />
<!-- -->
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet"
integrity="sha384-zF4BRsG/fLiTGfR9QL82DrilZxrwgY/+du4p/c7J72zZj+FLYq4zY00RylP9ZjiT" crossorigin="anonymous" />
<!-- -->
<!--
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/b2custom.css" rel="stylesheet" />
-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" href="http://www.b2ps.com" target="_blank">ACME</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Super Product Page<span class="sr-only">(current)</span></a>
</li>
<li>
<a href="#">Documentation</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Dashboard??</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row">
<!-- Left Nav Panel -->
<div class="col-xs-3">
<div data-spy="affix" data-offset-top="0" >
<div class="panel-group" role="tablist" id="b2navpanel" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="navPanel1">
<h4 class="panel-title">
<a href="#collapseOne" role="button" data-toggle="collapse" data-parent="#b2navpanel" aria-expanded="true"
aria-controls="collapseOne">Section 1</a>
</h4>
</div>
<div class="collapse panel-collapse in" role="tabpanel" id="collapseOne" aria-labelledby="navPanel1">
<div class="panel-body">
<ul>
<li><a href="#Chapter1Section">Chapter 1</a></li>
<li><a href="#Chapter2Section">Chapter 2</a></li>
<li><a href="#Chapter3Section">Chapter 3</a></li>
<li><a href="#Chapter4Section">Chapter 4</a></li>
<li><a href="#Chapter5Section">Chapter 5</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="navPanel2">
<h4 class="panel-title">
<a href="#collapseTwo" class="collapsed" role="button" data-toggle="collapse" data-parent="#b2navpanel"
aria-expanded="false" aria-controls="collapseTwo">Section 2</a>
</h4>
</div>
<div class="collapse panel-collapse" role="tabpanel" id="collapseTwo" aria-labelledby="navPanel2">
<div class="panel-body">
<ul>
<li><a href="#Chapter5Section">Chapter 5</a></li>
<li><a href="#Chapter6Section">Chapter 6</a></li>
<li><a href="#Chapter7Section">Chapter 7</a></li>
<li><a href="#Chapter8Section">Chapter 8</a></li>
<li><a href="#Chapter9Section">Chapter 9</a></li>
<li><a href="#Chapter10Section">Chapter 11</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="navPanel3">
<h4 class="panel-title">
<a href="#collapseThree" class="collapsed" role="button" data-toggle="collapse" data-parent="#b2navpanel"
aria-expanded="false" aria-controls="collapseThree">Section 3</a>
</h4>
</div>
<div class="collapse panel-collapse" role="tabpanel" id="collapseThree" aria-labelledby="navPanel3">
<div class="panel-body">
<ul>
<li><a href="#Chapter11Section">Chapter 11</a></li>
<li><a href="#Chapter12Section">Chapter 12</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Content Panel -->
<div class="col-xs-9">
<!-- Setup Content Section -->
<div>
<h1 id="Section1Section" class="bg-primary">Section 1</h1>
<h2 id="Chapter1Section">Chapter 1</h2>
<p>
The Commodore 64, also known as the C64 or the CBM 64, is an 8-bit home computer introduced in January 1982 by Commodore International
(first shown at the Consumer Electronics Show, in Las Vegas, January 7–10, 1982).[5] It has been listed in the Guinness World Records
as the highest-selling single computer model of all time,[6] with independent estimates placing the number sold between 10 and 17 million
units.[3] Volume production started in early 1982, marketing in August for US$595 (equivalent to $1,509 in 2017).[7][8] Preceded by
the Commodore VIC-20 and Commodore PET, the C64 took its name from its 64 kilobytes (65,536 bytes) of RAM. It had superior sound and
graphical specifications compared to other earlier systems such as the Apple II and Atari 800, with multi-color sprites and a more
advanced sound processor.
</p>
<p>
The C64 dominated the low-end computer market for most of the 1980s.[9] For a substantial period (1983–1986), the C64 had between 30%
and 40% share of the US market and two million units sold per year,[10] outselling the IBM PC compatibles, Apple Inc. computers, and
the Atari 8-bit family of computers. Sam Tramiel, a later Atari president and the son of Commodore's founder, said in a 1989 interview,
"When I was at Commodore we were building 400,000 C64s a month for a couple of years."[11] In the UK market, the C64 faced competition
from the BBC Micro and the ZX Spectrum,[12] but the C64 was still one of the two most popular computers in the UK.[13]
</p>
<p>
Part of the Commodore 64's success was its sale in regular retail stores instead of only electronics or computer hobbyist specialty
stores. Commodore produced many of its parts in-house to control costs, including custom integrated circuit chips from MOS Technology.
It has been compared to the Ford Model T automobile for its role in bringing a new technology to middle-class households via creative
and affordable mass-production.[14] Approximately 10,000 commercial software titles have been made for the Commodore 64 including
development tools, office productivity applications, and video games.[15] C64 emulators allow anyone with a modern computer, or a
compatible video game console, to run these programs today. The C64 is also credited with popularizing the computer demoscene and is
still used today by some computer hobbyists.[16] In 2011, 17 years after it was taken off the market, research showed that brand
recognition for the model was still at 87%.[6]
</p>
<h2 id="Chapter2Section">Chapter 2</h2>
<p>
The Commodore 64, also known as the C64 or the CBM 64, is an 8-bit home computer introduced in January 1982 by Commodore International
(first shown at the Consumer Electronics Show, in Las Vegas, January 7–10, 1982).[5] It has been listed in the Guinness World Records
as the highest-selling single computer model of all time,[6] with independent estimates placing the number sold between 10 and 17 million
units.[3] Volume production started in early 1982, marketing in August for US$595 (equivalent to $1,509 in 2017).[7][8] Preceded by
the Commodore VIC-20 and Commodore PET, the C64 took its name from its 64 kilobytes (65,536 bytes) of RAM. It had superior sound and
graphical specifications compared to other earlier systems such as the Apple II and Atari 800, with multi-color sprites and a more
advanced sound processor.
</p>
<p>
The C64 dominated the low-end computer market for most of the 1980s.[9] For a substantial period (1983–1986), the C64 had between 30%
and 40% share of the US market and two million units sold per year,[10] outselling the IBM PC compatibles, Apple Inc. computers, and
the Atari 8-bit family of computers. Sam Tramiel, a later Atari president and the son of Commodore's founder, said in a 1989 interview,
"When I was at Commodore we were building 400,000 C64s a month for a couple of years."[11] In the UK market, the C64 faced competition
from the BBC Micro and the ZX Spectrum,[12] but the C64 was still one of the two most popular computers in the UK.[13]
</p>
<p>
Part of the Commodore 64's success was its sale in regular retail stores instead of only electronics or computer hobbyist specialty
stores. Commodore produced many of its parts in-house to control costs, including custom integrated circuit chips from MOS Technology.
It has been compared to the Ford Model T automobile for its role in bringing a new technology to middle-class households via creative
and affordable mass-production.[14] Approximately 10,000 commercial software titles have been made for the Commodore 64 including
development tools, office productivity applications, and video games.[15] C64 emulators allow anyone with a modern computer, or a
compatible video game console, to run these programs today. The C64 is also credited with popularizing the computer demoscene and is
still used today by some computer hobbyists.[16] In 2011, 17 years after it was taken off the market, research showed that brand
recognition for the model was still at 87%.[6]
</p>
<h2 id="Chapter3Section">Chapter 3</h2>
<p>
The Commodore 64, also known as the C64 or the CBM 64, is an 8-bit home computer introduced in January 1982 by Commodore International
(first shown at the Consumer Electronics Show, in Las Vegas, January 7–10, 1982).[5] It has been listed in the Guinness World Records
as the highest-selling single computer model of all time,[6] with independent estimates placing the number sold between 10 and 17 million
units.[3] Volume production started in early 1982, marketing in August for US$595 (equivalent to $1,509 in 2017).[7][8] Preceded by
the Commodore VIC-20 and Commodore PET, the C64 took its name from its 64 kilobytes (65,536 bytes) of RAM. It had superior sound and
graphical specifications compared to other earlier systems such as the Apple II and Atari 800, with multi-color sprites and a more
advanced sound processor.
</p>
<p>
The C64 dominated the low-end computer market for most of the 1980s.[9] For a substantial period (1983–1986), the C64 had between 30%
and 40% share of the US market and two million units sold per year,[10] outselling the IBM PC compatibles, Apple Inc. computers, and
the Atari 8-bit family of computers. Sam Tramiel, a later Atari president and the son of Commodore's founder, said in a 1989 interview,
"When I was at Commodore we were building 400,000 C64s a month for a couple of years."[11] In the UK market, the C64 faced competition
from the BBC Micro and the ZX Spectrum,[12] but the C64 was still one of the two most popular computers in the UK.[13]
</p>
<p>
Part of the Commodore 64's success was its sale in regular retail stores instead of only electronics or computer hobbyist specialty
stores. Commodore produced many of its parts in-house to control costs, including custom integrated circuit chips from MOS Technology.
It has been compared to the Ford Model T automobile for its role in bringing a new technology to middle-class households via creative
and affordable mass-production.[14] Approximately 10,000 commercial software titles have been made for the Commodore 64 including
development tools, office productivity applications, and video games.[15] C64 emulators allow anyone with a modern computer, or a
compatible video game console, to run these programs today. The C64 is also credited with popularizing the computer demoscene and is
still used today by some computer hobbyists.[16] In 2011, 17 years after it was taken off the market, research showed that brand
recognition for the model was still at 87%.[6]
</p>
<h2 id="Chapter8Section">Chapter 8</h2>
<p>
The Commodore 64, also known as the C64 or the CBM 64, is an 8-bit home computer introduced in January 1982 by Commodore International
(first shown at the Consumer Electronics Show, in Las Vegas, January 7–10, 1982).[5] It has been listed in the Guinness World Records
as the highest-selling single computer model of all time,[6] with independent estimates placing the number sold between 10 and 17 million
units.[3] Volume production started in early 1982, marketing in August for US$595 (equivalent to $1,509 in 2017).[7][8] Preceded by
the Commodore VIC-20 and Commodore PET, the C64 took its name from its 64 kilobytes (65,536 bytes) of RAM. It had superior sound and
graphical specifications compared to other earlier systems such as the Apple II and Atari 800, with multi-color sprites and a more
advanced sound processor.
</p>
<p>
The C64 dominated the low-end computer market for most of the 1980s.[9] For a substantial period (1983–1986), the C64 had between 30%
and 40% share of the US market and two million units sold per year,[10] outselling the IBM PC compatibles, Apple Inc. computers, and
the Atari 8-bit family of computers. Sam Tramiel, a later Atari president and the son of Commodore's founder, said in a 1989 interview,
"When I was at Commodore we were building 400,000 C64s a month for a couple of years."[11] In the UK market, the C64 faced competition
from the BBC Micro and the ZX Spectrum,[12] but the C64 was still one of the two most popular computers in the UK.[13]
</p>
<p>
Part of the Commodore 64's success was its sale in regular retail stores instead of only electronics or computer hobbyist specialty
stores. Commodore produced many of its parts in-house to control costs, including custom integrated circuit chips from MOS Technology.
It has been compared to the Ford Model T automobile for its role in bringing a new technology to middle-class households via creative
and affordable mass-production.[14] Approximately 10,000 commercial software titles have been made for the Commodore 64 including
development tools, office productivity applications, and video games.[15] C64 emulators allow anyone with a modern computer, or a
compatible video game console, to run these programs today. The C64 is also credited with popularizing the computer demoscene and is
still used today by some computer hobbyists.[16] In 2011, 17 years after it was taken off the market, research showed that brand
recognition for the model was still at 87%.[6]
</p>
<h2 id="Chapter8Section">Chapter 8</h2>
<p>
The Commodore 64, also known as the C64 or the CBM 64, is an 8-bit home computer introduced in January 1982 by Commodore International
(first shown at the Consumer Electronics Show, in Las Vegas, January 7–10, 1982).[5] It has been listed in the Guinness World Records
as the highest-selling single computer model of all time,[6] with independent estimates placing the number sold between 10 and 17 million
units.[3] Volume production started in early 1982, marketing in August for US$595 (equivalent to $1,509 in 2017).[7][8] Preceded by
the Commodore VIC-20 and Commodore PET, the C64 took its name from its 64 kilobytes (65,536 bytes) of RAM. It had superior sound and
graphical specifications compared to other earlier systems such as the Apple II and Atari 800, with multi-color sprites and a more
advanced sound processor.
</p>
<p>
The C64 dominated the low-end computer market for most of the 1980s.[9] For a substantial period (1983–1986), the C64 had between 30%
and 40% share of the US market and two million units sold per year,[10] outselling the IBM PC compatibles, Apple Inc. computers, and
the Atari 8-bit family of computers. Sam Tramiel, a later Atari president and the son of Commodore's founder, said in a 1989 interview,
"When I was at Commodore we were building 400,000 C64s a month for a couple of years."[11] In the UK market, the C64 faced competition
from the BBC Micro and the ZX Spectrum,[12] but the C64 was still one of the two most popular computers in the UK.[13]
</p>
<p>
Part of the Commodore 64's success was its sale in regular retail stores instead of only electronics or computer hobbyist specialty
stores. Commodore produced many of its parts in-house to control costs, including custom integrated circuit chips from MOS Technology.
It has been compared to the Ford Model T automobile for its role in bringing a new technology to middle-class households via creative
and affordable mass-production.[14] Approximately 10,000 commercial software titles have been made for the Commodore 64 including
development tools, office productivity applications, and video games.[15] C64 emulators allow anyone with a modern computer, or a
compatible video game console, to run these programs today. The C64 is also credited with popularizing the computer demoscene and is
still used today by some computer hobbyists.[16] In 2011, 17 years after it was taken off the market, research showed that brand
recognition for the model was still at 87%.[6]
</p>
<h2 id="Chapter9Section">Chapter 9</h2>
<p>
The Commodore 64, also known as the C64 or the CBM 64, is an 8-bit home computer introduced in January 1982 by Commodore International
(first shown at the Consumer Electronics Show, in Las Vegas, January 7–10, 1982).[5] It has been listed in the Guinness World Records
as the highest-selling single computer model of all time,[6] with independent estimates placing the number sold between 10 and 17 million
units.[3] Volume production started in early 1982, marketing in August for US$595 (equivalent to $1,509 in 2017).[7][8] Preceded by
the Commodore VIC-20 and Commodore PET, the C64 took its name from its 64 kilobytes (65,536 bytes) of RAM. It had superior sound and
graphical specifications compared to other earlier systems such as the Apple II and Atari 800, with multi-color sprites and a more
advanced sound processor.
</p>
<p>
The C64 dominated the low-end computer market for most of the 1980s.[9] For a substantial period (1983–1986), the C64 had between 30%
and 40% share of the US market and two million units sold per year,[10] outselling the IBM PC compatibles, Apple Inc. computers, and
the Atari 8-bit family of computers. Sam Tramiel, a later Atari president and the son of Commodore's founder, said in a 1989 interview,
"When I was at Commodore we were building 400,000 C64s a month for a couple of years."[11] In the UK market, the C64 faced competition
from the BBC Micro and the ZX Spectrum,[12] but the C64 was still one of the two most popular computers in the UK.[13]
</p>
<p>
Part of the Commodore 64's success was its sale in regular retail stores instead of only electronics or computer hobbyist specialty
stores. Commodore produced many of its parts in-house to control costs, including custom integrated circuit chips from MOS Technology.
It has been compared to the Ford Model T automobile for its role in bringing a new technology to middle-class households via creative
and affordable mass-production.[14] Approximately 10,000 commercial software titles have been made for the Commodore 64 including
development tools, office productivity applications, and video games.[15] C64 emulators allow anyone with a modern computer, or a
compatible video game console, to run these programs today. The C64 is also credited with popularizing the computer demoscene and is
still used today by some computer hobbyists.[16] In 2011, 17 years after it was taken off the market, research showed that brand
recognition for the model was still at 87%.[6]
</p>
</div>
</div>
</div>
</div>
<div style="width: 100%; height: 75px;"></div>
<!-- Page Footer -->
<footer class="b2pagefooter">
<p>Copyright 2018 B2PS</p>
</footer>
<!--
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script></div>
<script src="js/bootstrap.min.js"></script>
-->
<!-- -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
<!--
<script>
$(document).ready(function () {
$('.accordion').on('shown hidden', function () {
$('body').scrollspy('refresh');
});
});
</script>
-->
<!-- -->
</body>
</html>Use affix events and resize event to update affix container width
Try this
Check demo here
HTML
<!-- Left Nav Panel -->
<div class="col-xs-4 col-sm-3">
<!-- Inner Content -->
</div>
<!-- Content Panel -->
<div class="col-xs-8 col-sm-9">
<!-- Inner Content -->
</div>
JS:
$(function() {
function changeAffixBoxWidth() {
let getParentWidth = $(".affix-side-section").parent().width();
$(".affix-side-section").css({
width: getParentWidth
});
}
$(window).on("resize", function() {
changeAffixBoxWidth();
});
$(".affix-side-section").on("affixed.bs.affix", function() {
changeAffixBoxWidth();
});
});