affix

This might be a bug within Bootstrap itself, but I'm still interested to see if anyone can come up with a fix or at least some help. To jump straight to the issue, open this jsfiddle in Safari and start to scroll down the page: http://jsfiddle.net/davereed362205122/8bZxb/2/ The scenario: I have a two column page setup with a right column menu and the following div: <div class="col-md-push-9 col-md-3"> (The menu needs to show up at the top on mobile devices, hence the push) Within that div is the affix menu: <div id="affix-menu" data-spy="affix" > The main content area is within a div like this

I am having problems with an overlapping sidebar when I use affix for bootstrap 3 and resize the window. Is there a way to add some css class so that instead of overlapping the column, the menu affixes to the top? Also the column is overlapping the footer. Any help would be greatly appreciated. It seems that many people are having this same issue. Here is the HTML: <div class="container"> <div class="row"> <div class="col-md-4 column"> <ul id="sidebar" class="nav nav-stacked" data-spy="affix" data-offset-top="130"> <li><a href="#software"><b>Software</b></a></li> <ul> <li><a href="#features"

I would like to use the Affix method described in Bootstraps documentation ( http://getbootstrap.com/javascript/#affix ), however the navbar I would like to fix to the top of the page after it scrolls to it can have different offset values depending upon the content above it. Here's an example of the navbar: <div class="navbar navbar-default" data-spy="affix" data-offset-top="200"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </div> As you can see, the data-offset-top is currently set at 200. This

This is for a single page, with a navbar that links to local anchors only. The navbar comes after a header, but sticks to top when scrolling down. You can see how it works on github pages But I've got two offset problems with link/anchors: as long as you don't scroll, the anchors are offset and masked by the navbar. once the navbar is affixed, the following links work as intended but not the first one. A body margin breaks the layout as it prevents the header from beginning right at the top: body { margin-top: 65px; } I've tried without success to play with margin/padding for the sections:

According to Bootstrap 3 docs I have added following attributes to a navbar: <nav class="navbar no-margin-bottom" data-spy="affix" data-offset-top="90" > ... </nav> After scrolling down the page Bootstrap 4 is not adding class to navbar which is affix. Can anyone tell me how to solve this problem? Bootstrap.js and jQuery.js are working. Anwar Hussain Although the affix is removed from Bootstrap in version 4. However, you can achieve your goal through this jQuery Code: $(window).on('scroll', function(event) { var scrollValue = $(window).scrollTop(); if (scrollValue == settings.scrollTopPx ||