Question

我在创建粘性导航时遇到了麻烦，我已经研究了许多教程，并查看了堆栈溢出，但我发现它非常复杂，或者它最终无法正常工作，我是初学程序员，我会如果有人能够了解我的情况，那就表示赞赏。 **粗体是我为粘性导航所写的 **如果我错误地格式化这个问题，我感到非常抱歉并且如果你发布我的css文件的粘贴bin但是改变它以使其工作，然后评论链接，它会好起来，因为它对我来说非常容易，因为我并不总是理解我的评论给出

Jquery的：

jQuery(document).ready(function() {

// define variables
var navOffset, scrollPos = 0;

// add utility wrapper elements for positioning
jQuery("nav").wrap('<div class="nav-placeholder"></div>');
jQuery("nav").wrapInner('<div class="nav-inner"></div>');
jQuery(".nav-inner").wrapInner('<div class="nav-inner-most"></div>');

// function to run on page load and window resize
function stickyUtility() {

    // only update navOffset if it is not currently using fixed position
    if (!jQuery("nav").hasClass("fixed")) {
        navOffset = jQuery("nav").offset().top;
    }

    // apply matching height to nav wrapper div to avoid awkward content jumps
    jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());

} // end stickyUtility function

// run on page load
stickyUtility();

// run on window resize
jQuery(window).resize(function() {
    stickyUtility();
});

// run on scroll event
jQuery(window).scroll(function() {

    scrollPos = jQuery(window).scrollTop();

    if (scrollPos >= navOffset) {
        jQuery("nav").addClass("fixed");
    } else {
        jQuery("nav").removeClass("fixed");
    }

});

}）;

HTML： http://pastebin.com/MSfbQxdv CSS： http://pastebin.com/v0VrGf3T

Answer 1

如果你想要的只是让你的标题“粘”＆＃34;然后你可以简单地使用CSS而不是JavaScript：

#navMenu {
        position: fixed;
        top: 0;
        height: 200px;        // 200px is just an example
}

#main {
        margin-top: 200px;   // Same as #navMenu height, so the top portion of the content stays below #navMenu 
}

粘性导航 - 初学者

1 个答案: