最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - stopping content from 'jumping' when navbar fixes to top of screen - Stack Overflow

programmeradmin2浏览0评论

I have a site that utilizes the Bootstrap 3 navbar. It is positioned 280px below a block div and sticks to the top of the page when scrolled to that point

HTML ( in < head > tags )

<script>
  $(document).ready(function() {
  var s = $("#nav");
  var pos = s.position();                    
  $(window).scroll(function() {
    var windowpos = $(window).scrollTop();
    if (windowpos >= pos.top) {
        s.addClass("stick");
    } else {
        s.removeClass("stick"); 
    }
  });
});

HTML

<div id="nav">
  <div class="navbar navbar-default navbar-static">
     <!-- .btn-navbar is used as the toggle for collapsed navbar content -->

...

CSS

header {
  height:280px;
}

.stick {
  position:fixed;
  top:0px;
  width: 100%;
}

It sticks to the page when it's scrolled to the way it's supposed to. BUT when the 'nav' div gets the position:fixed attribute applied, it no longer is in the content flow and the content 'jumps' up the same height as the height of the nav.

How can I keep the content from jumping?

I have a site that utilizes the Bootstrap 3 navbar. It is positioned 280px below a block div and sticks to the top of the page when scrolled to that point

HTML ( in < head > tags )

<script>
  $(document).ready(function() {
  var s = $("#nav");
  var pos = s.position();                    
  $(window).scroll(function() {
    var windowpos = $(window).scrollTop();
    if (windowpos >= pos.top) {
        s.addClass("stick");
    } else {
        s.removeClass("stick"); 
    }
  });
});

HTML

<div id="nav">
  <div class="navbar navbar-default navbar-static">
     <!-- .btn-navbar is used as the toggle for collapsed navbar content -->

...

CSS

header {
  height:280px;
}

.stick {
  position:fixed;
  top:0px;
  width: 100%;
}

It sticks to the page when it's scrolled to the way it's supposed to. BUT when the 'nav' div gets the position:fixed attribute applied, it no longer is in the content flow and the content 'jumps' up the same height as the height of the nav.

How can I keep the content from jumping?

Share Improve this question asked Aug 17, 2015 at 4:38 user3550879user3550879 3,4696 gold badges37 silver badges69 bronze badges 3
  • You can create a container around your element. Apply same to the container. Then you can fix your header to top but its parent element will occupy the same height – MayThrow Commented Aug 17, 2015 at 5:40
  • I am a it confused as to what you mean – user3550879 Commented Aug 17, 2015 at 6:00
  • I added it as an answer – MayThrow Commented Aug 17, 2015 at 6:11
Add a ment  | 

3 Answers 3

Reset to default 5

Create a wrapping element around your header. Apply same height to the wrapper. Now if you make your header fixed, the wrapper element will still be there, occupying the same height

here's an example

 $(document).ready(function() {
  var s = $("#nav");
  var pos = s.position();                    
  $(window).scroll(function() {
    var windowpos = $(window).scrollTop();
    if (windowpos >= pos.top) {
        s.addClass("stick");
    } else {
        s.removeClass("stick"); 
    }
  });
});
body {margin:0}

#nav, .nav-wrapper {
  height:100px;
    background: gray;
}

.stick {
  position:fixed;
  top:0px;
  width: 100%;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>

<div class="nav-wrapper">
    <div id="nav">
        <div class="navbar navbar-default navbar-static">Header</div>
    </div>
</div>

Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>
Content content content<br>

Don't create a custom class like sticky for it use navbar-fixed-top class like,

if (windowpos >= pos.top) {
    s.addClass("navbar-fixed-top");
} else {
    s.removeClass("navbar-fixed-top"); 
}

Refer

I had this issue too recently. I solved it by putting a position:absolute div behind my nav and using that as my scroll point reference for the addClass. Honestly I'm not quite sure why it worked, but it did!

发布评论

评论列表(0)

  1. 暂无评论