滚动时将菜单栏固定在顶部
我见过一些网站，当用户向下滚动页面时，框会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>
