滚动时将菜单栏固定在顶部

你也可以使用 css 规则:

position: fixed ;和 top: 0px ;

在你的菜单标签上。

这种效果通常是通过以下一些 jquery 逻辑实现的:

$(window).bind('scroll', function () {
if ($(window).scrollTop() > 50) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});

这意味着一旦窗口滚动过一定数量的垂直像素，它会在菜单中添加一个类，将其位置值改为“固定”。

有关完整的实现细节，请参见: http://jsfiddle.net/adamb/F4BmP/

这是 jquery 代码，用于修复当它触摸浏览器顶部时的 div，希望它能有很大的帮助。

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
$.fn.scrollBottom = function() {
return $(document).height() - this.scrollTop() - this.height();
};


var $el = $('#sidebar>div');
var $window = $(window);
var top = $el.parent().position().top;


$window.bind("scroll resize", function() {
var gap = $window.height() - $el.height() - 10;
var visibleFoot = 172 - $window.scrollBottom();
var scrollTop = $window.scrollTop()


if (scrollTop < top + 10) {
$el.css({
top: (top - scrollTop) + "px",
bottom: "auto"
});
} else if (visibleFoot > gap) {
$el.css({
top: "auto",
bottom: visibleFoot + "px"
});
} else {
$el.css({
top: 0,
bottom: "auto"
});
}
}).scroll();
});
});//]]>


</script>

在此示例中，可以显示以菜单为中心的。

超文本标示语言

<div id="main-menu-container">
<div id="main-menu">
//your menu
</div>
</div>

CSS

.f-nav{  /* To fix main menu container */
z-index: 9999;
position: fixed;
left: 0;
top: 0;
width: 100%;
}
#main-menu-container {
text-align: center; /* Assuming your main layout is centered */
}
#main-menu {
display: inline-block;
width: 1024px; /* Your menu's width */
}

JS

$("document").ready(function($){
var nav = $('#main-menu-container');


$(window).scroll(function () {
if ($(this).scrollTop() > 125) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});
});

但我会加一个动态变量 num

num = $('.menuFlotante').offset().top;

以获得准确的偏移量或窗口内的位置，以避免找到正确的位置。

 $(window).bind('scroll', function() {
if ($(window).scrollTop() > num) {
$('.menu').addClass('fixed');
}
else {
num = $('.menuFlotante').offset().top;
$('.menu').removeClass('fixed');
}
});

检查下面的链接，它有 html，css，JS 和一个现场演示:)享受

Http://codepen.io/senff/pen/aygvd

// Create a clone of the menu, right next to original.
$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();


scrollIntervalID = setInterval(stickIt, 10);




function stickIt() {


var orgElementPos = $('.original').offset();
orgElementTop = orgElementPos.top;


if ($(window).scrollTop() >= (orgElementTop)) {
// scrolled past the original position; now only show the cloned, sticky element.


// Cloned element should always have same left position and width as original element.
orgElement = $('.original');
coordsOrgElement = orgElement.offset();
leftOrgElement = coordsOrgElement.left;
widthOrgElement = orgElement.css('width');


$('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement+'px').show();
$('.original').css('visibility','hidden');
} else {
// not scrolled past the menu; only show the original menu.
$('.cloned').hide();
$('.original').css('visibility','visible');
}
}

* {font-family:arial; margin:0; padding:0;}
.logo {font-size:40px; font-weight:bold;color:#00a; font-style:italic;}
.intro {color:#777; font-style:italic; margin:10px 0;}
.menu {background:#00a; color:#fff; height:40px; line-height:40px;letter-spacing:1px; width:100%;}
.content {margin-top:10px;}
.menu-padding {padding-top:40px;}
.content {padding:10px;}
.content p {margin-bottom:20px;}

<div class="intro">Some tagline goes here</div>

$(window).scroll(function () {


var ControlDivTop = $('#cs_controlDivFix');


$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
ControlDivTop.stop().animate({ 'top': ($(this).scrollTop() - 62) + "px" }, 600);
} else {
ControlDivTop.stop().animate({ 'top': ($(this).scrollTop()) + "px" },600);
}
});
});

你可以试试用你的导航 div:

div.fixed{
postion: fixed;
top: 0;
width: 100%;
}

你可以加上:

 $(window).trigger('scroll')

重新加载已滚动的页时触发滚动事件。否则你可能会把菜单弄错位置。

$(document).ready(function(){
$(window).trigger('scroll');
$(window).bind('scroll', function () {
var pixels = 600; //number of pixels before modifying styles
if ($(window).scrollTop() > pixels) {
$('header').addClass('fixed');
} else {
$('header').removeClass('fixed');
}
});
});

或者用更有活力的方式

$(window).bind('scroll', function () {
var menu = $('.menu');
if ($(window).scrollTop() > menu.offset().top) {
menu.addClass('fixed');
} else {
menu.removeClass('fixed');
}
});

在 CSS 中添加类

.fixed {
position: fixed;
top: 0;
}

尝试使用粘贴的 jquery 插件

Https://github.com/garand/sticky

<script src="jquery.js"></script>
<script src="jquery.sticky.js"></script>
<script>
$(document).ready(function(){
$("#sticker").sticky({topSpacing:0});
});
</script>

使用 JavaScript，当某些元素进入或离开 viewport 时，可以使用 Intersection Observer API 触发这种效果。

Https://developer.mozilla.org/en-us/docs/web/api/intersection_observer_api