Question

如何暂时隐藏div （。header-small），然后在用户开始滚动网站时显示它？

这是我想要实现的一个例子。当用户开始滚动时，标题完全下降。我该怎么做？

http://www.hollywoodreporter.com/

这是我的代码的一个例子。

HTML

<div class="header">

</div>

<div class="header-small">

</div>

CSS

body {height:10000px;}
.header {background:black; width:100%; height:65px; position:relative;}
.header-small {background:black; width:100%; height:35px; position:fixed; top:0; display:none;}

http://jsfiddle.net/bendaggers/6wbpC/

Answer 1

我会添加更多逻辑，比如何时显示固定菜单，当它通过主菜单时隐藏它，当你在主菜的一半时。同时用css隐藏小菜单。

DEMO

var headerSmall = $('.header-small');
var header = $('.header');
var whenToHide = (header.offset().top + header.height()) / 2;

$(window).scroll(function () {
    var offset = headerSmall.offset();

    if (offset.top <= whenToHide) {
        headerSmall.slideUp();
    } else {
        headerSmall.slideDown();
    }
});

Answer 2

$(document).ready(function(){
 $('.header-small').hide();
   $(window).scroll(function () {
   if($(window).scrollTop()>0){
    $('.header-small').show();
    }
    else{$('.header-small').hide();}    
   });
});

Demo Fiddle

用户开始滚动时暂时隐藏Div然后显示Div

2 个答案: