Question

对于我的网站，我做了一个很好的“Jumbotron”。

为了更好地展示我想要将导航栏的不透明度设置为0，直到用户到达下一层。然后它应该融入。

所以我写了这个：

$(document).ready(function(){

    $(window).on('scroll', function() {


        var scrollTop     = $(window).scrollTop(),
            thirdLayerOffset = $('#thirdLayer').offset().top,
            distanceTop      = (thirdLayerOffset - scrollTop);

        if(distanceTop < 0) {
            $('#navMenu').css({
                opacity: 1
            })
        }

        else if (distanceTop > 0) {
            $('#navMenu').css({
                'opacity': 0
            })
        }



    });


});

到目前为止工作正常，但我希望整个体验更顺畅。所以我尝试了jquery .animate（）。

if(distanceTop < 0) {
    $('#navMenu').animate({
        opacity: 1
    }, 500, function() {
    });
}

使用它会导致一个问题：当我再次快速向上滚动时，它会停留并开始像疯了一样闪烁。我很确定它有500ms的问题。

但我不知道如何解决它。

我见过其他网站使用这样的东西，所以它应该是可能的。任何人都可以告诉我如何让它发挥作用吗？

问候

修改：添加了HTML：

 <div class="container-fluid">
        <nav class="navbar navbar-default navbar-fixed-top navMenu" id="navMenu">
            <div class="container col-md-12" style="background-color: #ffffff">
                <div class="col-md-4">
    <img src="lib/img/logo.jpg" id="logo">
                </div>

                <div class="col-md-8">
                    <!-- Space for menu Bar-->
                </div>

            </div>
        </nav>
    </div>


    <div class="container-fluid">

<!-- JumboTronText1 -->
        <div class="col-md-12 JumboC">


     <div class="getInvisible2">
                <h1 class="animated infinite pulse" id="pulseHeader">Durchatmen und runterscrollen<br> <i class="fa fa-arrow-circle-o-down"></i>
                </h1>
            </div>


                <!-- JumboTron Image with second Text-->


                   <div class="JumboCImage" id="JumboCImage">
                       <h2 style="z-index: -1;" id="JumboCImageText">Wilkommen.
                       </h2>
                   </div>


            <div class="container-fluid secondPart">
                <div class="secondLayer" id="secondLayer">



                </div>
                <!-- Third Layer Blend Menu in-->
                <div class="thirdLayer col-md-12 container-fluid" id="thirdLayer">

                    <h1>
    <br>TEXT<br>

                    </h1>


                </div>

抱歉格式不正确。有些不对劲。我会在下班后尝试修复它。

Answer 1

您可以使用css3过渡执行此操作（具体取决于您的浏览器兼容性要求）。

将过渡和淡化类添加到导航菜单样式：

#navMenu {
    transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}     

#navMenu.faded{
    opacity:0;
}

当您到达目标滚动位置时，请根据需要使用addClass或removeClass函数添加或删除.faded类。

if(distanceTop < 0) {
    $('#navMenu').addClass('faded')
}

Answer 2

您可以尝试向css中的#navmenu添加转换，而不是使用jQuery制作动画

例如

#navmenu{
transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-webkit-transition: opacity 0.5s; }

Answer 3

选中此Demo

我认为这就是你要找的东西

$(document).ready(function(){
    $(window).on('scroll', function() {
        var scrollTop     = $(window).scrollTop(),
            thirdLayerOffset = $('#thirdLayer').offset().top,
            distanceTop      = (thirdLayerOffset - scrollTop);
        if(distanceTop > 0) {
            if(distanceTop < 200 && distanceTop >= 100)
                $('#navMenu').css({ opacity: (distanceTop-100)/100});
            else if(distanceTop <100)
                $('#navMenu').css({ opacity: 0});
            else 
                $('#navMenu').css({ opacity: 1});
        }
        else if (distanceTop <= 0) {
            $('#navMenu').css({
                'opacity': 0
            })
        }
    });
});

Answer 4

这是因为在您执行的每次滚动时，会触发scroll事件，从而导致动画排队。

为了阻止立即排队animate方法，您可以检查该元素当前是否为动画。如果是这样，请通过返回false来阻止它。

if(distanceTop < 0) {
    if($('#navMenu').is(':animated')){
        return false;
    }
    $('#navMenu').animate({
        opacity: 1
    }, 500, function() {
  });
}

请注意jQuery的is()方法的用法。

如果div到达某个位置，则在导航栏中混合

4 个答案: