admin 管理员组

文章数量: 1086019

new to jquery here but I'm trying to learn some different stuff that's been done on websites I frequent.

One such case that I can't figure out, is how to create a drop shadow for a fixed positioned header, so that when you scroll a drop shadow appears under the header and then disappears when you aren't scrolling anything. Here's the website I frequent that uses this technique www.thisisluckyme

It doesn't seem too plex but I can't find much to go off of when trying to make this. Any help or insight into how its down would be very appreciated!

new to jquery here but I'm trying to learn some different stuff that's been done on websites I frequent.

One such case that I can't figure out, is how to create a drop shadow for a fixed positioned header, so that when you scroll a drop shadow appears under the header and then disappears when you aren't scrolling anything. Here's the website I frequent that uses this technique www.thisisluckyme.

It doesn't seem too plex but I can't find much to go off of when trying to make this. Any help or insight into how its down would be very appreciated!

  • javascript
  • jquery
  • html
  • css
Share Improve this question asked Dec 8, 2011 at 20:11 trying_hal9000trying_hal9000 4,4038 gold badges45 silver badges63 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 10

Pretty simple. You just bind an event handler to the window's scroll event, and check the position of the fixed header's top. If it's not 0, add the shadow. If it is 0, remove the 0.

Working example: http://jsfiddle/3cRe5/

the JS:

var header = $('.header');

$(window).scroll(function(e){
    if(header.offset().top !== 0){
        if(!header.hasClass('shadow')){
            header.addClass('shadow');
        }
    }else{
        header.removeClass('shadow');
    }
});

本文标签：

Error[2]: Invalid argument supplied for foreach(), File: /www/wwwroot/roclinux.cn/tmp/view_template_quzhiwa_htm_read.htm, Line: 58
File: /www/wwwroot/roclinux.cn/tmp/route_read.php, Line: 205, include(/www/wwwroot/roclinux.cn/tmp/view_template_quzhiwa_htm_read.htm)
File: /www/wwwroot/roclinux.cn/tmp/index.inc.php, Line: 129, include(/www/wwwroot/roclinux.cn/tmp/route_read.php)
File: /www/wwwroot/roclinux.cn/index.php, Line: 29, include(/www/wwwroot/roclinux.cn/tmp/index.inc.php)

版权声明：本文标题：javascript - Jquery htmlcss: Creating drop shadow on fixed pos header that appears and disappears when scrollling - Stack Overfl 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744059758a2526508.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。