0

我正在一个应该有一个固定导航菜单的网站上工作，所以它会随着你滚动。我遇到的唯一问题是设计师想要做到这一点，所以一旦导航离开它的位置并开始向下滚动页面，它会在顶部拾取一个厚厚的黑色边框。一旦开始移动，有没有办法添加样式？

现有代码：

<ul id="stickyNav">
<li class="technology"><a href="#technology">Technology</a></li>
      <li class="sales"><a href="#sales">Sales</a></li>
      <li class="operations"><a href="#operations">Operations</a></li>
      <li class="marketing"><a href="#marketing">Marketing</a></li>
      <li class="profitability"><a href="#profitability">Profitability</a></li>
</ul>

ul#stickyNav{background: url(../../../images/bb/stickynav-bg.jpg) repeat-x; height: 56px; position: fixed; width: 100%; z-index: 800;}
4

2 回答 2

1

您可以从一些示例开始，您可以查看这个小提琴以查看它的实际效果！

请注意，我必须克隆导航以免弄乱实际的 DOM。visibility: hidden如果你的导航有很多交互，你可以在它开始滚动时玩。

祝你好运！

CSS

#body {
    position: relative;
    top: 0;
}
#content {
    height: 2000px;
}
.nav {
    width: 100%;
    background: black;
    color: white;
}

HTML

<div id="body">
    <h1>Stuff</h1>
    <div id="nav" class="nav">Scroll on the go!</div>
    <div id="content">Interestring things</div>
</div>

jQuery

$(function() {
    var $nav = $("#nav");
    $nav.get(0).originalY = $nav.offset().top;
});
$(document).scroll(function() {
    var $nav = $("#nav");
    var navDOM = $nav.get(0);
    var curY = $(document).scrollTop();

    // Check whether it started scrolling after the navbar
    if (curY > navDOM.originalY) {
        if ($('#nav_clone').length < 1) {
            // Note that you only have to clone the navigation once per scroll event
            $nav.clone()
                .attr('id', 'nav_clone')
                .addClass('nav')
                .css('position', 'fixed')
                .css('top', 0)
                .appendTo("#body");
        }
    }
    // Else, we remove the cloned navigation
    else {
        $('#nav_clone').remove();
    }
});

编辑：请注意，您可以使用适当的 id#nav和#nav_clone. .nav让你分享共同的风格。

于 2013-03-29T20:36:41.027 回答
0

我没有尝试使用 blint 的代码，所以这可能也有效，但是其他人给了我一个更简单的解决方案：

sticky = $('#stickyNav');
classtoAdd = 'nav_active';

$(window).scroll(function(){
/* Sticky Nav stuff */
var window_top = $(window).scrollTop();
if(window_top > 0){
sticky.addClass(classtoAdd);


}else{
sticky.removeClass(classtoAdd);

}
/* End Sticky Nav */


});

然后我在 CSS 中添加了任何新样式作为 #stickyNav.nav_active{}

于 2013-03-29T21:55:21.973 回答