Question

目标是在滚动窗口时向（固定定位的）标题的底部添加阴影。但由于某种原因，这段代码似乎不起作用。当我滚动时，没有任何反应。任何帮助将不胜感激。

CODE

java脚本写在我的html文档的头部。

＆＃13;

<script>
$(window).scroll(function() {     
    var scroll = $(window).scrollTop();
    if (scroll > 0) {
	$("#header-home").addClass("shadow");
    }
    else {
	$("#header-home").removeClass("active");
    }
});
</script>

＆＃13;

#header-home{
    position:fixed;
    width:100%;
    top:0;
    left:0;
    background-color:#fff;
    z-index:900;
}

.active { 
    box-shadow: 0 4px 2px -2px #f1f1f1; 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<header id="header-home">
    <!-- header content here -->
</header>

＆＃13;

Answer 1

在您的代码中

$("#header-home").addClass("shadow");

我期待的应该是

$("#header-home").addClass("active");

Answer 2

你有几个问题。首先，你正在申请课程＆＃34; shadow＆＃34;但是删除了课程“活跃的”＃39; （应该是阴影/阴影），其次你的盒子阴影代码不起作用。使用this link构造盒子阴影代码。

此示例演示了一旦上述错误得到纠正，您的代码基本上是正确的。

＆＃13;

$(window).scroll(function() {     
  var scroll = $(window).scrollTop();
  if (scroll > 100) {
    $("#header-home").addClass("shadow");
  }
  else {
    $("#header-home").removeClass("shadow");
  }
});

＆＃13;

html,body{height:2000px;}
#header-home{position:fixed; height:50px;width:100%; top:0; left:0; xbackground-color:black; xcolor:#fff; z-index:900;}

.active { box-shadow: 0 4px 2px -2px #f1f1f1; }
.shadow {border:3px solid orange;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
  
<header id="header-home">
        header content here
</header>

＆＃13;

滚动时在阴影的底部添加阴影

2 个答案: