Question

打开下面的网站。在此站点中，他们的按钮位于中间底部，名为（与我们交谈）。我也想像这样保持我的按钮不变，而不使用位置固定。我想使用JS或jQuery。

我尝试过-

html：-

  <div class="sweep-footer sticky-scroll-box">
    Talk To Us<i class="right button"></i>
</div>

 <div class="footer-container">
    <div class="wrapper">
        <div class="footer-1-left">
            <img src="twitter.png" style="float: left;" height="40" 
 width="40">
            <p class="footer-para-1">
                How Artificial Intelligence Could Help Us Live Longer <a 
 class="active" href="#">lol</a><br>
                <a class="active" href="#">lol</a>
            </p>
        </div>
        <div class="footer-1-right">
            <p style="display: inline-block;">
                WEBIO UPDATES<br><span style="color: #e24b27"> TO YOUR 
 INBOX</span>
            </p>
            <form style="display: inline-block;">
                <input type="email" name="email" placeholder="Enter your 
 email" class="input">
            </form>
            <div class="sweep-x-footer">
                Send
            </div>
        </div><br><br><br><br>
        <div class="footer-2">
            <img src="logo-footer.png" class="logo-footer">
            <p class="footer-item-1">
                Dublin&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </p>
            <p class="footer-item-2">
                San Francisco
            </p>
            <p class="footer-item-3">
                London
            </p>
        </div><br><br>
        <div class="footer-3">
            <p class="footer-3-para">
                ©2016 Webio. All Rights Reserved
            </p>
            <div class="footer-3-center">
                <img src="icon-social-1.png" class="footer-image-1 jump-x">
                <img src="icon-social-2.png" class="footer-image-2 jump-x">
                <img src="icon-social-3.png" class="footer-image-3 jump-x">
            </div>
            <div class="footer-bottom-right">
                <p class="footer-bottom-right-para">
                    crafted by <a 
 href="#">Xavier</a>
                </p>
            </div><br>
            <a href="#" class="privacy">Privacy Policy</a>
        </div>
    </div>
</div>

CSS：-

 .footer-container {
 background: url(bg-footer.jpg) no-repeat center center;
 background-size: cover;
 height: 385px;
 padding-bottom: 15px;
 padding-top: 60px;
 overflow-y: hidden;
 }

 .sweep-footer {
 display:inline-block;
 position:relative; 
 padding-top: 13px;
 padding-bottom: 13px;
 cursor:pointer;
 background:#1a4168;
 color:white; 
 z-index:0;
 text-transform: uppercase;
 font-weight: 900;
 letter-spacing: 2px;
 width: 200px!important;
}

.sweep-footer:before {
   content: "";
  position: absolute;
 z-index:-1;
 top: 0;  left: 0;  right: 0;  bottom: 0;
 background: #e24b27;
  transform: scaleX(0);
 transform-origin: 0 50%;
   transition: transform .3s ease-out;
 }

.sweep-footer:hover:before{
  transform: scaleX(1);
}

.fixed {
 position:fixed;
 bottom: 0;
 z-index:99999;
 left: 583px;
 display: hidden;
}

脚本：-

 $(document).ready(function () {  
 var top = $('.sticky-scroll-box').offset().top;
  $(window).scroll(function (event) {
  var y = $(this).scrollTop();
  if (y <= top)
    $('.sticky-scroll-box').addClass('fixed');
  else
  $('.sticky-scroll-box').width($('.sticky-scroll-box').parent().width());
 });
});

var x = $('.footer-container').scrollTop();
$(window).scroll(function() {
  if (window.scroll() === x) {
    $('.sticky-scroll-box').removeClass('fixed');
  }
});

问题是固定的类没有被移除！我想和那个网站一样！我的按钮应该粘贴在该站点上所粘贴的位置！

告诉我正确的代码。与该网站相同。

Open this Site

Answer 1

这对您来说相对简单，但是您的代码不完整。您的html中没有sticky-scroll-box div。如果您可以创建一个可以帮助大量工作的JS小提琴。

使用jQuery / JS来定位粘性元素，而不是使用位置粘性

1 个答案: