Question

我试图为我的课程创建一个投资组合网站，但每次我尝试使用这个jquery代码时，它都不起作用，但它在小提琴中http://jsfiddle.net/gxRC9/2701/ 他们要做的是，在向下滚动标题后应将自己固定在顶部，这意味着它会向下滚动。 jquery代码：

$(document).ready(function(){

$(window).scroll(function(){
var bier = $("#header"), scroll = $(window).scrollTop();

if (scroll >= 100) bier.addClass("fixed");
else bier.removeClass("fixed");
});

});

Answer 1

它确实有效。在你的jsFiddle中，你使用varname'sticky'和'bier'来交替使用。

jsFiddle Demo

$(document.ready(function() {

  $(window).scroll(function() {
    var bier = $('#header'),
        scroll = $(window).scrollTop();

    if (scroll >= 100) bier.addClass('fixed');
    else bier.removeClass('fixed');
  }); //window.scroll

}); //END document.ready

body {margin:0;}
section {height:2000px;padding-top:100px;}
#header{width:1903px;height:60px;background-color:#333;float:left;z-index:11;border-bottom:solid #545454 6px;}
.sticky {background:orange;}
.fixed {position:fixed;top:0;left:0;width:100%;}

@media only screen and (max-width:1920px) {ul {list-style-type:none;margin:0;margin-top:7px;margin-left:25px;padding:0;padding-left:25px;overflow:hidden;background-color:#333;}
li {float:left;}
li a {display:block;color:white;text-align:center;padding:14px 16px;text-decoration:none;font-size:20px;}
/* Change the link color to #111 (black) on hover */
li a:hover {background-color:#111;text-decoration:underline;}
@media only screen and (max-width:1440px) {ul {list-style-type:none;margin:0;margin-top:7px;margin-left:25px;padding:0;padding-left:25px;overflow:hidden;background-color:#333;}
	li {float:left;}
	li a {display:block;color:white;text-align:center;padding:14px 16px;text-decoration:none;font-size:20px;}
	/* Change the link color to #111 (black) on hover */
	li a:hover {background-color:#111;text-decoration:underline;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<section>
  <div id="header">
    <ul>
      <li><a href="index.php">Home</a>
      </li>
      <li><a href="index.php">FaQ</a>
      </li>
      <li><a href="index.php">Portfolio</a>
      </li>
      <li><a href="index.php">Contact</a>
      </li>

    </ul>
  </div>
</section>

它无法在本地系统上运行的最可能原因是以下两种可能性之一：

（1）您是否包含加载jQuery库的引用？

（2）你把你的卷轴包裹在

中了吗？

$(document).ready(function(){ 
    //all code here
});

包装函数？

为什么我的jquery修复div不起作用？

1 个答案: