Question

我正在使用小型导航的HTML页面上工作，该导航大约从页面的中间开始。我希望导航栏在到达页面顶部时粘在页面顶部（固定）。我的尝试看起来像这样：

剧本：

<script>
$(function() {
    var header = $(".clearHeader");
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();

        if (scroll >= 100) {
            header.removeClass('scrollHeader').addClass("fixedHeader");
        } else {
            header.removeClass("fixedHeader").addClass('scrollHeader');
        }
    });
});

</script>

HTML：

<div class="scrollHeader">
            <div class="row" style="background:#444;">
            <div class="container">
            <a href="#"><div class="col-sm-3 smallNav">
            Perks
            </div></a>
            <a href="#"><div class="col-sm-3 smallNav">
            Growth
            </div></a>
            <a href="#"><div class="col-sm-3 smallNav">
            Technology
            </div></a>
            <a href="#"><div class="col-sm-3 smallNav">
            Apply
            </div></a>
            </div>
            </div>
            </div>

CSS：

.scrollHeader { position: relative !important;}
.fixedHeader {position: fixed !important; }

然而，这段代码并不起作用。有什么建议？我加载了jQuery 1.9.1。 Fiddle

Answer 1

快速查看，我不确定您是否在代码开头定位了正确的对象。

var header = $(".clearHeader");

但是在你的HTML中，没有什么是类＆＃34; clearHeader＆＃34;，所以这不起作用。也许将其改为

var header = $(".scrollHeader");

可以做到吗？

编辑：还添加top：0px;到您的fixedHeader类将导航粘贴到页面顶部。

小提琴：http://jsfiddle.net/5d7ymoc0/2/

BONUS超级流畅的导航滚动动作：http://jsfiddle.net/5d7ymoc0/4/

Answer 2

$('.clearHeader')应该是$('.scrollHeader')吗？

是这样......

$(function() {

    navPos = $(".scrollHeader").position().top;

    $(window).scroll(function() {    
        if(navPos>0 && $(window).scrollTop()>navPos) {              
            $(".navbar").addClass("navbar-fixed-top");
        } else {
            $(".navbar").removeClass("navbar-fixed-top");
        }

        if (scroll >= ) {
            header.removeClass('scrollHeader').addClass("fixedHeader");
        } else {
            header.removeClass("fixedHeader").addClass('scrollHeader');
        }
    });
});

Answer 3

如果您希望标题在滚动时粘在顶部，我相信这就是您想要的。

示例jsfiddle：http://jsfiddle.net/5d7ymoc0/3/

更改为javascript：

           $(function() {

             $(window).scroll(function() {    

        //fix the header to the top
      $(".smallNav").css({"position":"fixed","top":"0px"});



       });
        });

更改为css：

   scrollHeader { position: relative !important;}
   .fixedHeader {position: fixed !important; }
   .smallNav {background: #333; color: #fff !important;padding: 10px;font-size: 20px; text-align:      center; }
   .wrapper {height: 2000px;}

在滚动上添加和删除类

3 个答案: