使元素固定在滚动

本文介绍了使元素固定在滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

当用户向下滚动到导航栏时，我试图将导航栏粘到顶部，然后当用户向上滚动到导航栏之上时，取消粘贴。我明白，这只能通过JavaScript实现。我是JavaScript的初学者，所以越容易越好。 JSFIDDLE在这里

I'm attempting to make the navigation bar stick to the top, when the user scrolls down to the nav bar and then unstick when the user scrolls back up past the navbar. I understand that this can only be implemented via JavaScript. I'm a beginner to JavaScript, so the easier the better. The JSFIDDLE is here.

HTML如下：

<section class="main"> <div id="wrap"> <div id="featured"> <div class="wrap"> <div class="textwidget"> <div class="cup"><img src="#""></div> <div id="header"></div></div></div></div></div></div></div> <div class="whiteboard"> <h1><a href="#">HELLO GUYS</a></h1> </div> </div> <div class="bg1"> <h2> WE ARE AN EVENTS MANAGEMENT COMPANY BASED IN LONDON. </h2></div>

CSS如下：

.main{text-align:center;} h1{ -webkit-font-smoothing: antialiased; display:inline-block; font: 800 1.313em "proxima-nova",sans-serif; padding: 10px 10px; margin: 20px 20px; letter-spacing: 8px; text-transform: uppercase; font-size:3.125em; text-align: center; max-width: 606px; line-height: 1.45em; position: scroll; background-color:#e94f78; text-decoration: none; color:yellow; background-image:url; } h1 a{ text-decoration: none; color:yellow; padding-left: 0.15em; } h2{ -webkit-font-smoothing: antialiased; display:inline-block; font: 800 1.313em "proxima-nova",sans-serif; letter-spacing: 8px; margin-top: 100px; text-transform: uppercase; font-size:3.125em; text-align: center; line-height: 1.45em; position: scroll; text-decoration: none; color:white; z-index: -9999; } h2 a{ text-decoration: none; color:white; padding-left: 0.15em; } h5{ position: absolute; font-family:sans-serif; font-weight:bold; font-size:40px; text-align: center; float: right; background-color:#fff; margin-top: -80px; margin-left: 280px; } h5 a{ text-decoration: none; color:red; } h5 a:hover{ color:yellow; } #text1{ -webkit-font-smoothing: antialiased; display:inline-block; font: 800 1.313em "proxima-nova",sans-serif; margin: 20px 20px; letter-spacing: 8px; text-transform: uppercase; font-size:3.125em; text-align: center; max-width: 606px; line-height: 1.45em; position: scroll; background-color:#E94F78; } #text1 a{ color:yellow; text-decoration: none; padding-left: 0.15em; } #text1 a:hover{ text-decoration: none; cursor:pointer; } .whiteboard{ background-image:url(krystalrae/img/krystalrae-2012-fall-print-leopard-sketch.jpg); background-position: center; padding: ; background-color: #fff; z-index: 1000; } .bg{ height:2000px; background-color:#ff0; background-image:url(alwayscreative/images/stars-last.jpg); position:relative; z-index: -9999; } .bg1{ background-image:url(alwayscreative/images/stars-last.jpg); z-index: -9999; height:1000px; } /* Header */ #wrap { margin: 0 auto; padding: 0; width: 100%; } #featured { background: #E94F78 url(www.creativityfluid/wp-content/themes/creativityfluid/images/img-bubbles-red.png) no-repeat top; background-size: 385px 465px; color: #fff; height: 535px; overflow: hidden; position: relative; z-index: -2; } #featured .wrap { overflow: hidden; clear: both; padding: 70px 0 30px; position: fixed; z-index: -1; width: 100%; } #featured .wrap .widget { width: 80%; max-width: 1040px; margin: 0 auto; } #featured h1, #featured h3, #featured p { color: yellow; text-shadow: none; } #featured h4{ color:white; text-shadow:none; } #featured h4 { margin: 0 0 30px; } #featured h3 { font-family: 'proxima-nova-sc-osf', arial, serif; font-weight: 600; letter-spacing: 3px; } #featured h1 { margin: 0; } .textwidget{ padding: 0; } .cup{ margin-top:210px; z-index: 999999; } .container{font-size:14px; margin:0 auto; width:960px} .test_content{margin:10px 0;} .scroller_anchor{height:0px; margin:0; padding:0;background-image:url()} .scroller{background:#FFF; background-image:url(krystalrae/img/krystalrae-2012-fall-print-leopard-sketch.jpg); margin:0 0 10px; z-index:100; height:50px; font-size:18px; font-weight:bold; text-align:center; width:960px;}

推荐答案

easy jQuery：

You can do that with some easy jQuery:

jsfiddle/jpXjH/6/

var elementPosition = $('#navigation').offset(); $(window).scroll(function(){ if($(window).scrollTop() > elementPosition.top){ $('#navigation').css('position','fixed').css('top','0'); } else { $('#navigation').css('position','static'); } });