Question

我是jQuery的新手，看了一个粘性导航栏的教程，出了点问题，并且想知道该做什么！

在我的脚本文件中，我有它，所以它在加载[http://pastebin.com/XYWR5tKJ][1]上运行此代码，并且我在css中有一个类用于导航占位符换行。

好吧边缘属性似乎不起作用，如果你运行网站并向下滚动导航栏一直向侧面，它应该居中（边缘工作）。我不知道为什么它没有这样做，它可能是一些愚蠢但请求帮助！“

HERES THE CODE__

Script.js: http://pastebin.com/XYWR5tKJ
Css: http://pastebin.com/Y51rYJVE
HTML: http://pastebin.com/tTftEJKh
__

THANKS!


  [1]: http://pastebin.com/tTftEJKh

Answer 1

固定的居中元素的基本设置为：

包含位置固定的元素。

其中的元素有余量：0 auto;和一个设定的宽度。

Answer 2

我说你的左边：0里面的东西主要是抵消事情。

既然你没有指定响应，这对你来说足够好吗？ http://jsbin.com/nevuqi/4/

也可能更好，作为在JSFiddle，Codepen或JSBin之类的东西中分享代码的提示，仅举几例......也适合在内部学习。

Answer 3

这个问题让我想起了JSFIDLE我回过头来学习相同的概念。我已将评论更新为更具可读性......

它并没有真正回答你的问题，但我认为这有助于理解在JQuery中实现粘性导航效果所涉及的各种组件，对于遇到此线程但不确定的人来说。

JavaScript / JQuery代码： （请参阅随附的html / css的jsfiddle）

//window - the container that holds and renders the document. 
//document - the rendered html within the window. the document can be bigger than the window as with this example as scrolling is needed..
//refer to css for more info on the appended classes to nav bar and proceeding element.
$(document).ready(function () {
//add a scroll function to the document that 
$(document).on('scroll', function () {

    //get the  number of pixels that the window is from the top of the document. this is zero at first.
    var scrollTop = $(this).scrollTop();

    //insert the name of your sticky nav element here in place of .scrollFixed
    $('.scrollFixed').each(function () {

        //scrollFix variable is initialized as .scrollFixed object with all its attributes.
        var scrollFix = $(this);

        //gets offset of sticky nav element in pixels 
        var topDistance = scrollFix.offset().top;
        var previousElement = scrollFix.prev();

        //this is just for debugging and learning purposes.
        $('.fixed_info').html('nav bar is ' + topDistance + ' pixels from top of document');

        //if you put topDistance here instead of the number manually, the nav bar will flicker.
        //unsure why..
        //checks to see whether nav element has been scrolled past the top of window.
        if ((298) < scrollTop) {

            //make sticky nav a fixed element
            scrollFix.addClass("stuck");

            //extend the element below for this example so proceeding elements don't visually jump up
            //when closing the empty gap.
            $(".element_below_fixed_nav_bar").addClass("extend");

            //indicates element is fixed!
            scrollFix.html("Element now fixed!");

        //you will have to manually put the topDistance here as well...
            //this checks whether the nav element's original top has passed the top of 
            //the enclosing window.
            //it needs to become scrollable again
        } else if (298 >= scrollTop && scrollFix.hasClass('stuck')) {

            //make sticky nav a scrollable element
            scrollFix.removeClass('stuck');

            //make proceeding element shorter to compensate for sticky nav pushing elements below it down.
            $(".element_below_fixed_nav_bar").removeClass("extend");

            //indicates element is scrollable!
            scrollFix.html("Element now moveable!");
        }
    });
});
});

它与您链接的JavaScript代码背后的逻辑非常相似。

从文档顶部查找窗口的像素数。文档首次加载时从0开始，除非另有编码。每次滚动时都会更新。
从文档顶部找到（偏移）导航栏元素的像素数。
通过检查导航栏到窗口的偏移量来检查导航栏是否已到达窗口顶部。如果是，则将其修复。
检查导航栏的原始偏移量是否低于窗口顶部。如果有，则使导航栏可滚动。

它并没有真正回答你的问题，但我认为这有助于理解在JQuery中实现粘性导航效果所涉及的各种组件，对于遇到此线程但不确定的人来说。

Html，css和jQuery。我的代码中有些东西不起作用

3 个答案: