Question

我有一个功能，当标题在向下滚动时达到某个div时，徽标会向下滑动到导航栏上。这有效，但使用jQuery向下滑动似乎“揭示”div而不是一次显示整个div并滑动该div。

它正在做的是正常的，因为我正在使用此处的元素：

http://api.jquery.com/slideDown/

但我喜欢这个例子，当我在导航上空盘旋：http://aaronjwood.com/

有没有使用jss的css的另一种方式？任何链接都会很棒！

这是我的jQuery来支持我的问题：

$(".logo .visible").hide(); 

    var topOfOthDiv = $("#home-2").offset().top;

    $(window).scroll(function(e) {
        e.preventDefault();
        if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
            $(".logo .visible").slideDown(300); //reached the desired point -- show div
        }else{
            $(".logo .visible").slideUp(300);
        }
    });

logo css：

h1.logo {
    width:126px;
    height:58px;
    float:left;
    margin:0 0 0 40px;
    margin-left:40px;

}

.logo .visible{
    display:none;
    height:100%;
    background-color:#2e2e2e;
    background:url(../images//logo.jpg) no-repeat;
}

HTML

<div id="nav">
        <div class="nav_wrapper">
        <h1 class="logo"><div class="visible"></div></h1>
            <ul id="navigation">
            </ul>
        </div>
     </div>

在js小提琴中，当单击该项时，面板“显示”自身而不是整体滑动div（如示例链接进一步向上^^）。希望这是有道理的。

链接：http://jsfiddle.net/sVCvF/

Answer 1

而不是slideDown，您可以使用animate将其向下滑动。例如，你可以使用这个：http://jsfiddle.net/sVCvF/

$(document).ready(function(){
  $("#flip").on('click', function(){
      $("#panel").animate({'margin-top': 0}, 1000);
  });
});

你需要对这段代码进行一些调整

向下滑动整个div而不是在slideDown / slideUp上显示

1 个答案: