jquery导航栏,jquery导航栏特效

用jquery来设置网页导航栏向下滚动时隐藏，向上滚动时显示的代码

script type="text/javascript" src=""/script

script

    (function() {

    new Headroom(document.querySelector("#nav-scroll"), { //这里的nav-scroll改为你的导航栏的id或class

        offset : 5, // 在元素没有固定之前，垂直方向的偏移量（以px为单位）

            tolerance: 5, // scroll tolerance in px before state changes        

        classes: {

            initial: "animated",  // 当元素初始化后所设置的class

            pinned: "slideUp", // 向上滚动时设置的class

            unpinned: "slideDown" // 向下滚动时所设置的class

        }

    }).init();    

    }());

/script

然后，加上样式就可以了：

.animated {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}

.animated .slideDown {top: -100px;}

.animated .slideUp {top: 0;}

相关问答

Q1: jquery滚动条导航栏怎么固定

其实所谓的网页滚动条固定就是一个简单的判断

function scrollLis(){

    var toTop = offs.top-$(window).scrollTop();

    if(toTop==0||toTop0){

        if(!$('.fixed-div').hasClass('add-fixed-div'))$('.fixed-div').addClass('add-fixed-div');

    }else{

        $('.fixed-div').removeClass('add-fixed-div');

    };

};

var offs=$('.fixed-div').offset();

$(window).scroll(function(){

scrollLis();

});

我解释下代码：

在你的nav class 同时加入.fixed-div

然后在css样式表中add-fixed-div写上绝对定位

scrollLis 滚到.fixed-div的时候就会添加一个add-fixed-div 而add-fixed-div他里面有一个绝对定位的css （position:fixed）这样就完成了导航固定了

在解释下

var offs=$('.fixed-div').offset();

$(window).scroll(function(){

scrollLis();

});

这个是判断回滚的时候取消固定

Q2: jquery 右侧导航栏为什么文字隐藏了背景还在

根据你的js你只是吧p标签隐藏了，你并没有把背景放在p标签中，你的HTML修改成lip会员spanimg src＝""/img/span/p/li

这样你就可以了。

或者你不改HTML直接隐藏li。

Q3: 怎么用jquery实现导航栏的不同按钮定位到不同的页面窗口

var arr=["1.html","2.html","3.html","4.html","5.html"];

$(":button").click(function(){

var me=$(this);

$("#main").load(arr[me.index()]);

});

///////////////

div id="main"

/div