在滚动和向下滚动菜单上添加底盒阴影 [英] Add bottom box shadow to the menu on scrollup and scrolldown

问题描述

我有一个具有以下CSS属性的菜单:

I have a menu with this CSS properties:

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

因此基于上述CSS属性，无论滚动如何，该元素(#header)显然都将保留在顶部.我要实现的功能是向上滚动和向下滚动，应该在该元素(#header)中添加一个底盒阴影，并在到达该元素的默认位置(#header)时将其删除.显然是页面的最高位置.

So based on the CSS properties above, this element (#header) will obviously remain on top regardless of the scrolling. What I'm trying to achieve is on scroll up and scroll down, a bottom box shadow should be added into that element (#header) and should be removed once it reaches the default location of that element (#header) which is obviously the top-most place of the page.

我愿意接受任何建议.

推荐答案

$(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版本

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

Whenever the page is scrolled we save the current distance from the top of the document in a variable (scroll).

如果当前位置大于0，则将active类添加到#header.

If the current position is greater than 0 we add the class active to #header.

如果当前位置等于0，则删除该类.

If the current position is equal to 0 we remove the class.

这篇关于在滚动和向下滚动菜单上添加底盒阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！