Фиксированный navbar (после скролла)

2015-10-19 Михаил Ведерников

HTML

<body>
<div class="page-wrapper">
    <div class="page-buffer">
        <div style="height: 100px; background-color: #761c19"></div>
        <div class="header">
            <div class="js-navbar navbar"></div>
        </div>
        <div class="content-wr"></div>
    </div>
</div>

CSS

html,
body{
  height: 100%;
}
body{
  margin: 0;
  padding: 0;
}
.page-buffer{
  height: 100%;
}
.page-wrapper{
  min-height: 100%;
}

.navbar{
  margin-bottom: 0!important;
  border-radius: 0!important;
  min-height: 40px!important;
  width: 100%;
  height: 40px;
  background-color: #808080;
  z-index: 1;
}
.content-wr{
  height: 1500px;
}

._fixed {
  position: fixed;
  top: 0;
}

jQuery

(function ($) {
    $(document).ready(function (e) {

        var progectTagsHeight = $('.js-navbar').css('height');
        var projectBlocksHeightTop = $('.js-navbar').position().top  ;

        $(window).scroll(function() {
            var top = $(document).scrollTop();
            if (top < projectBlocksHeightTop ) {
                $('.js-navbar').removeClass('_fixed');
                $('.content-wr').css({marginTop:0});
            }
            else {
                $('.js-navbar').addClass('_fixed');
                $('.content-wr').css({marginTop: progectTagsHeight});
            }
        });
    });
})(jQuery);

добавьте свой комментарий