使用JQuery滚动后显示div，然后再次隐藏

时间：2018-04-05 12:36:35

标签： javascript jquery html css

我需要只显示一个div，一旦我滚出800px并在我到达页面的#prefooter.

之后再次隐藏它

这是我的Fiddle

我有两个Jquery机构独立工作但是我需要它们一起工作 - 我不是一个前端开发者，所以非常感谢你的帮助！ 

//Only Show when scrolled passed 800px

$(document).ready(function() {
  $(document).scroll(function() {
    var y = $(this).scrollTop();
    var tabwrap = $('.cta-bar');
    console.log("im working");
    if (y > 800) {
      console.log(y);
      console.log("greater");
      tabwrap.removeClass("hide");
      tabwrap.addClass("show");
    } else {
      console.log(y);
      console.log("lesser");
      tabwrap.removeClass("show");
      tabwrap.addClass("hide");
    }
  });
});


//Hide When Passed Pre-Footer

$(document).ready(function() {
  var $window = $(window);
  var tabwrap = $('.cta-bar');
  var prefooter = $('#preFooter');
  var prefooter_top = prefooter.offset().top;
  var prefooter_height = prefooter.height();
  var prefooter_bottom = prefooter_top + prefooter_height;
  $window.on('scroll', function() {
    var scrollTop = $window.scrollTop();
    var viewport_height = $(window).height();
    var scrollTop_bottom = scrollTop + viewport_height;
    if (scrollTop_bottom > prefooter_top) {
      tabwrap.removeClass("show");
      tabwrap.addClass("hide");
    } else {
      tabwrap.removeClass("hide");
      tabwrap.addClass("show");
    }
  });
});

2 个答案:

答案 0 :(得分：2)

您需要的是为三个状态中的每个状态定义一个if块，因为它们是互斥的。现在，有人提醒：这个解决方案就是在每个SCROLL TRIGGER上添加和删除类，这是非常低效的，每次tabwrap进入/离开时，只尝试添加一个boolean var到交换类一个状态，如bool changed;，我会留给你的。

$(document).ready(function() {
    var prefooter = $('#preFooter');
    var prefooter_top = prefooter.offset().top;
    console.log(prefooter_top);
    var viewport_height = $(window).height();
    var tabwrap = $('.cta-bar');

    $(document).scroll(function() {
        var y = $(this).scrollTop();
        //console.log("im working");
        var scrollTop = $(this).scrollTop();
        
        var scrollTop_bottom = scrollTop + viewport_height;
        if (y <= 800) {
            console.log(y, "lesser");
            tabwrap.removeClass("show").addClass('hide');
        } else if (scrollTop_bottom <= prefooter_top) {
            console.log(y, "greater");
            tabwrap.removeClass("hide").addClass("show");
        } else {
            tabwrap.removeClass("show").addClass("hide");
            console.log(y, 'end');
        }
    });
  });
.cta-bar{
  position: fixed
}

.cta-bar.hide{
  display: none
}

#preFooter{
  height: 100px;
 
  bottom: 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cta-bar hide">fdfd</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


<footer id="preFooter">footer</footer>

答案 1 :(得分：0)

将你的支票结合在一个条件下，如果比800px更好并且小于prefooter的顶部或者更大的prefooter底部然后显示，否则隐藏该div

if( (scroll > 800 && scroll < scrollTopHeight) || scroll > scrollBottomHeight)

见下面的代码：

$(function(){
  var preFooterTop =  $("#preFooter").offset().top
  var preFooterHeight =  $("#preFooter").height();
  var preFooterOffset = preFooterTop - preFooterHeight;
  var $tabwrap = $('.cta-bar');
  $tabwrap.addClass("hide");
  
  $(window).on("scroll",function(){
     var scroll = $(this).scrollTop();
     //console.log(scroll,preFooterOffset);
     var viewport_height = $(window).height();
     
     var scrollTopHeight = preFooterOffset + viewport_height;
     var scrollBottomHeight = preFooterTop + viewport_height;
     
     if( (scroll > 800 && scroll < scrollTopHeight) || scroll > scrollBottomHeight) {
        $tabwrap.removeClass("hide");
        if(!$tabwrap.hasClass("show"))
          $tabwrap.addClass("show");
     }
     else {
        $tabwrap.removeClass("show");
        if(!$tabwrap.hasClass("hide"))
          $tabwrap.addClass("hide");
     }
  });

})
body {
  background-color: #fff;
  padding: 20px;
  min-height: 900px;
}

#preFooter {
  background: red;
  height: 600px;
  margin-top: 2200px;
}

#footer {
  background: blue;
  height: 300px;
}

/* - - - - - - - - - - - - - - - - - - - */

.cta-bar {
  z-index: 10000;
  position: fixed;
  max-width: 840px;
  left: 20px;
  right: 20px;
  bottom: 30px;
  background: #fff;
  color: #323a45;
  margin: 0 auto;
  border-radius: 10px;
  padding: 10px 20px 10px 20px;
  cursor: pointer;
  -webkit-box-shadow: 0 0 25px 4px rgba(69, 79, 91, 0.1);
  box-shadow: 0 0 25px 4px rgba(69, 79, 91, 0.1);
  -webkit-transition: -webkit-transform .3s cubic-bezier(0.455, 0.030, 0.515, 0.955), box-shadow .3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
  -webkit-transition: transform .3s cubic-bezier(0.455, 0.030, 0.515, 0.955), box-shadow .3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
  transition: transform .3s cubic-bezier(0.455, 0.030, 0.515, 0.955), box-shadow .3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
  transition: all .7s ease-in-out;
}

.cta-bar.show {
  margin-bottom: 0px;
}

.cta-bar.hide {
  margin-bottom: -200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preFooter">
  <p>pre-footer</p>
</div>
<div id="footer">
  <p>footer</p>
</div>

<!-- - - - - - - - - - - - - - - - - - -->

<div class="cta-bar">
  hello
</div>

相关问题
最新问题