Question

我在下面的代码中遇到了一些问题，我希望带有文字的div能够保持广告的背景透明的英雄的底部然后当div到达顶部时它会粘在黑色背景上。我的问题是我必须在javascript非常高的900中设置它，我知道这是一个坏主意，因为它不会在小屏幕中正常操作我如何通过屏幕控制它我尝试从顶部做90％并且它没有＆＃39工作。

滚动时我的bg图像也会逐渐淡出黑色，但我必须将滚动设置为900，这是实现此目的的最佳方法吗？

当你回来时，棍子div低于英雄使其变大

＆＃13;

$(window).scroll(function(){
    $(".hero-background").css("opacity", 1 - $(window).scrollTop() / 900);
  });
$(document).scroll(function() {
  //detect when user scroll to top and set position to relative else sets position to fixed
  $(".sticky").css({
    "top": "0",
    "background-color": "black",
    "position": $(this).scrollTop() > 900 ? "fixed" : "relative"
  });
});

＆＃13;

.hero {
  position: relative;
  height: 100vh;
  background-color: #000;
}

.hero-background {
  height: 100vh;
  background-image: url('http://2.bp.blogspot.com/-egOH8RkBAu0/UQfDNRSwC9I/AAAAAAAAeps/5Ay3wbD0Ihk/s1600/ice-snowy-rocks-mountains-hd-background-wallpapers-widescreen-high-resolutions-025.jpg');
  background-position: 50% 0px;
  background-size: cover;
  background-repeat: no-repeat;
}

.block {
  height: 1500px;
}

.sticky {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 55px;
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="hero" id="hero">
    <div class="hero-background"></div>
    <div class="sticky">
      <div class="text-block">This is some text inside of a div block.</div>
    </div>
  </div>
<div class="block"></div>

＆＃13;

Answer 1

您不能使用常数900，获取div的偏移顶部并在通过该点时设置固定位置。调整大小时还需要再次获取偏移顶部，因为您的内容将更改偏移的位置

https://jsfiddle.net/zc5Lbd8a/2/

JS

// cache sticky div
var $sticky = $(".sticky");

// cache offset top when page loads
var stickyOffset = $sticky.offset().top;

$(window).scroll(function() {

  if( $(this).scrollTop() >= stickyOffset ) {
    $sticky.addClass('docked');
  } else {
    $sticky.removeClass('docked');
  }

});

$(window).resize( function() {
  // get offset top again when resizing
    stickyOffset = $sticky.offset().top;
});

CSS

.sticky {
  top: 0;
  height: 55px;
  color: red;
}
.docked {
  background-color: #000;
  position: fixed;
}

HTML没有被编辑，css被更新以使其更简单并且在js中我添加了一个类而不是每次都设置css道具

Sticky Transition div使用英雄100vh

1 个答案: