使用Javascript / jQuery滚动显示按钮

时间：2018-01-28 03:23:42

标签： javascript html css twitter-bootstrap

按钮已经有了Javascript这就是为什么我在下面包含它 - 这个代码与我的问题是分开的。这是将按钮更改为其他东西ON CLICK - 我想保持按钮隐藏，直到滚动...看了一遍，我无法找到正确的方法。 （对JS来说很新）..每当我摆弄代码时，它就破坏了JS，这就是我寻求帮助的原因..我将不胜感激。 

$(document).ready(function() {
  $("#mydiv").hide();
  $("#show").click(function() {
    $("#mydiv").toggle();
    $("#show").toggle();
  });
  $("#hide").click(function() {
    $("#mydiv").hide();
    $("#show").show();
  });
});
#mydiv {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 360px;
}

.btn-purple {
  width: 360px;
  background: #721a71;
  color: #fff;
  padding: 10px;
  position: fixed;
  bottom: 0;
  left: 0;
}

.myheader {
  background: #721a71;
  color: #fff;
  padding: 10px;
}

.mybody {
  background: #f5f5f5;
  padding: 10px;
}
<div class="btn btn-purple" id="show">
  Get in touch <i class="fa fa-angle-up pull-right" aria-hidden="true" style="color:#fff; font-weight:bolder; font-size:20px;"></i>
</div>

<div id="mydiv">
  <div class="myheader text-center">
    Get in touch <i id="hide" class="fa fa-angle-down pull-right" aria-hidden="true" style="color:#fff; font-weight:bolder; font-size:20px;"></i>
  </div>

  <div class="mybody">
    <p class="d-none d-md-block">Number: <a class="external" href="#">01522 123456</a></p>
    <p class="d-none d-md-block">Email: <a class="external" href="#">example@example.co.uk</a></p>
    <p class="d-none d-md-block">Bookings: <a class="external" href="#">booking.example.co.uk</a></p>
    <p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Call <span class="fa fa-phone" aria-hidden="true"></span></a></p>
    <p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Email <span class="fa fa-envelope" aria-hidden="true"></span></a></p>
    <p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Book <span class="fa fa-sign-in" aria-hidden="true"></span></a></p>
  </div>
</div>

2 个答案:

答案 0 :(得分：0)

不是100％肯定你的要求，所以我给你一些开始。我添加了一个元素来测量窗口滚动，它将滚动（第一个.big），当屏幕外一点会触发一个事件，当屏幕返回时通过另一个事件触发器显示。我还在标记中的CSS中添加了一些样式。请注意，你可能只需要一个隐藏/显示，只需要上/下类的东西，但我为你留下了它。

$(document).ready(function() {
  $("#show").on('click', function() {
    $("#mydiv").toggle(true);
    $("#show").toggle(false);
  });
  $("#hide").on('click', function() {
    $("#mydiv").toggle(false);
    $("#show").toggle(true);
  });
  $(window).on('scroll', function() {
    var t = document.getElementsByClassName("big")[0];
    var tt = t.getBoundingClientRect().top;
    if (tt < -100) { // as soon as its 100px off screen
      setTimeout(function() {
        $("#show").trigger('click');
      }, 1000);
    }
    if (tt >= 0) { // as soon as its back on screen
      setTimeout(function() {
        $("#hide  ").trigger('click');
      }, 1000);
    }
  });
});
#mydiv {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 360px;
  display: none;
}

#show>i,
#hide>i {
  color: #fff;
  font-weight: bolder;
  font-size: 20px;
}

.big {
  height: 20em;
}

.btn-purple {
  width: 360px;
  background: #721a71;
  color: #fff;
  padding: 10px;
  position: fixed;
  bottom: 0;
  left: 0;
}

.myheader {
  background: #721a71;
  color: #fff;
  padding: 10px;
}

.mybody {
  background: #f5f5f5;
  padding: 10px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="btn btn-purple" id="show">
  Get in touch S<i class="fa fa-angle-up pull-right" aria-hidden="true">^^^</i>
</div>
<div id="mydiv">
  <div class="myheader text-center">
    Get in touch H<i id="hide" class="fa fa-angle-down pull-right" aria-hidden="true">xxx</i>
  </div>
  <div class="mybody">
    <p class="d-none d-md-block">Number: <a class="external" href="#">01522 123456</a></p>
    <p class="d-none d-md-block">Email: <a class="external" href="#">example@example.co.uk</a></p>
    <p class="d-none d-md-block">Bookings: <a class="external" href="#">booking.example.co.uk</a></p>
    <p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Call <span class="fa fa-phone" aria-hidden="true"></span></a></p>
    <p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Email <span class="fa fa-envelope" aria-hidden="true"></span></a></p>
    <p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Book <span class="fa fa-sign-in" aria-hidden="true"></span></a></p>
  </div>
</div>
<div class='big'>make me scroll</div>
<div class='big'>(I just take up space)</div>

答案 1 :(得分：0)

如果要在滚动Jquery Scroll上显示div，则需要将滚动功能附加到窗口。那么，如果你不熟悉javascript，最简单的方法就是添加一个类并使用css控制其他所有内容。所以你可以做以下的事情：

$(window).scroll(function(){
    $('#show').addClass('scrolled', $(this).scrollTop() > 100);
});

当窗口达到100px时，这将添加scrolled类。如果您希望它在重新启动而不是使用addCLass时删除该类，您只需将其切换为toggleClass，它也会将其删除。

所以这是：

＆＃13;
＆＃13; 
$(document).ready(function() {
  $("#mydiv").hide();
  $("#show").click(function() {
    $("#mydiv").toggle();
    $("#show").toggle();
  });
  $("#hide").click(function() {
    $("#mydiv").hide();
    $("#show").show();
  });
});
$(window).scroll(function(){
	$('#show').addClass('scrolled', $(this).scrollTop() > 100);
});
＆＃13; 
body{
  height:300vh;
}
#mydiv {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 360px;
}

.btn-purple {
  width: 360px;
  background: #721a71;
  color: #fff;
  padding: 10px;
  position: fixed;
  bottom: 0;
  left: 0;
  opacity:0;
  transition:opacity 1000ms ease-in-out;
}
.btn-purple.scrolled{
  opacity:1;
}
.myheader {
  background: #721a71;
  color: #fff;
  padding: 10px;
}

.mybody {
  background: #f5f5f5;
  padding: 10px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn btn-purple" id="show">
  Get in touch <i class="fa fa-angle-up pull-right" aria-hidden="true" style="color:#fff; font-weight:bolder; font-size:20px;"></i>
</div>

<div id="mydiv">
  <div class="myheader text-center">
    Get in touch <i id="hide" class="fa fa-angle-down pull-right" aria-hidden="true" style="color:#fff; font-weight:bolder; font-size:20px;"></i>
  </div>

  <div class="mybody">
    <p class="d-none d-md-block">Number: <a class="external" href="#">01522 123456</a></p>
    <p class="d-none d-md-block">Email: <a class="external" href="#">example@example.co.uk</a></p>
    <p class="d-none d-md-block">Bookings: <a class="external" href="#">booking.example.co.uk</a></p>
    <p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Call <span class="fa fa-phone" aria-hidden="true"></span></a></p>
    <p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Email <span class="fa fa-envelope" aria-hidden="true"></span></a></p>
    <p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Book <span class="fa fa-sign-in" aria-hidden="true"></span></a></p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

如果您不想要过渡效果，您只需使用display属性并删除不透明度并从css过渡，如下所示：

.btn-purple {
  width: 360px;
  background: #721a71;
  color: #fff;
  padding: 10px;
  position: fixed;
  bottom: 0;
  left: 0;
  display:none;
}
.btn-purple.scrolled{
  display:block;
}
相关问题
最新问题