Html、css和jQuery.我的代码有问题

Html, css, and jQuery. Something isnt working in my code

本文关键字：我的 代码 有问题 jQuery css Html      更新时间：2023-09-26

我是jQuery的新手，正在看一个关于粘性导航栏的教程，发现了一些问题，我想知道该怎么办！

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

好吧，margin属性似乎不起作用，如果你运行网站并一直向下滚动，导航栏会粘在一边，它应该是居中的（margins作业）。我不知道它为什么不这么做，这可能是愚蠢的事情，但请帮帮我！"

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

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

包含位置固定的元素。

其中具有边距的元素：0 auto；以及设定的宽度。

我想说，你的left:0在fixed内部主要是抵消了一些东西。

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

同样可能更好的是，作为在JSFiddle、Codepen或JSBin中共享代码的提示。。。内部学习也很好。

这个问题让我想起了我不久前为学习同样的概念而做的一个JSFIDLE。我用评论更新了它，使它更可读。。。

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

JavaScript/JQuery代码：（参考jsfiddle获得附带的html/css）

//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代码背后的逻辑非常相似。

  1. 从文档顶部查找窗口的像素数。除非另有编码，否则文档首次加载时从0开始。每次滚动时都会更新。

  2. 从文档顶部查找（偏移）导航栏元素的像素数。

  3. 通过检查导航条到窗口的偏移量，检查导航条是否已到达窗口顶部。如果是，则将其修复。

  4. 检查导航条的原始偏移是否已降至窗口顶部以下。如果有，则使导航栏可滚动。

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

相关文章：