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

我见过一些网站,当用户向下滚动页面时,框会popup到右侧或左侧…

另外,注意到这个模板: http : //www.mvpthemes.com/maxmag/devise师做了一个很好的工作离开导航栏固定在上面。

现在,这些是如何完成的? 我想它使用jQuery获取页面的位置并显示框。

你能引导我到哪里我可以find一个片段,所以我可以学习做这样的事情。

这个效果通常通过具有如下的jQuery逻辑来实现:

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

这就是说,一旦窗口滚动了一定数量的垂直像素,就会向菜单添加一个类,将其位置值更改为“固定”。

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

在这个例子中,你可以显示你的菜单为中心。

HTML

 <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"); } }); }); 

与adamb相同,但我会添加一个dynamicvariablesnum

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

以获得窗口内的精确偏移或位置,以避免find正确的位置。

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

你也可以使用CSS规则:

position: fixed ;top: 0px ;

在你的菜单标签。

你可能想要添加:

  $(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'); } }); }); 

检查下面的链接,它有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> 

或者以更加dynamic的方式做到这一点

 $(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的代码,它是用来固定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来试试这个:

 postion: fixed; top: 0; width: 100%; 
 $(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); } }); }); 

尝试与粘性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>