jquery - 在向上滚动和向下滚动时向菜单添加底部框阴影

Question

我有一个带有这个 CSS 属性的菜单:

#header {
  width: 100%;
  position: fixed;
  z-index: 9000;
  overflow: auto;
}

因此，根据上面的 CSS 属性，无论滚动如何，此元素 (#header) 显然都会保持在顶部。我想要实现的是向上滚动和向下滚动，底部框阴影应该添加到该元素 (#header) 并且一旦它到达该元素的默认位置就应该被删除 ( #header) 显然是页面的最顶部。

我愿意接受任何建议和建议。

Answer 1

$(window).scroll(function() {     
    var scroll = $(window).scrollTop();
    if (scroll > 0) {
        $("#header").addClass("active");
    }
    else {
        $("#header").removeClass("active");
    }
});

body {
    height: 2000px;
    margin: 0;
}

body > #header{position:fixed;}

#header {
    width: 100%;
    position: fixed;
    z-index:9000;
    overflow: auto;
    background: #e6e6e6;
    text-align: center;
    padding: 10px 0;
    transition: all 0.5s linear;
}

#header.active {
     box-shadow: 0 0 10px rgba(0,0,0,0.4);   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="header">HEADER</div>

JSFiddle version

每当页面滚动时，我们都会将当前距文档顶部的距离保存在一个变量中 (scroll)。

如果当前位置大于 0，我们将 active 类添加到 #header。

如果当前位置等于 0，我们将删除该类。