Question

当某个元素进入视图时，我希望整个网站的背景从白色变为黑色。因此，当您按元素滚动时，背景将转换为黑色。当您向上滚动时，我希望页面的背景颜色变回白色。谢谢！

HTML：

<div id="#block-yui_3_17_2_2_1495044195108_28541" class="colorChange">

<script> 

$(window).scroll(function () {

$('#block-yui_3_17_2_2_1495044195108_28541').each(function () {

var topOfWindow = $(window).scrollTop(),

bottomOfWindow = topOfWindow + $(window).height();

var imagePos = $(this).offset().top;

if(imagePos <= bottomOfWindow-100 && imagePos >= topOfWindow-250){

$(this).addClass('colorChange');

}else{

$(this).removeClass('colorChange');

}

});

});

</script>

CSS：

.colorChange{
#siteWrapper {

-webkit-animation-name: colorChange;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in;

animation-name: colorChange;
animation-duration: 1s;
animation-timing-function: ease-in;
}}

@-webkit-keyframes colorChange {
0%  {
    background-color:black;
}
100.0% {
    background-color:black;
}
}

@keyframes colorChange {
0%  {
    background-color:black;
}
100.0% {
    background-color:black;
}
}

Answer 1

使用scroll事件，您可以计算获取元素当前坐标的h1（或任何元素）的偏移量。 wScroll变量获取滚动条的当前垂直位置，在这种情况下是窗口的顶部。在这种情况下，检查滚动条是否大于或等于要定位的元素，并从窗口高度中减去（如果您希望在屏幕上元素更改背景后将1.2更改为1）添加转换到了动画的身体。向下滚动查看演示。对不起，如果没有得到很好的解释，请原谅我的写作。

$(window).scroll(function(){
  var wScroll = $(this).scrollTop();

if(wScroll >= $('h1').offset().top - ($(window).height() / 1.2 ) ){
  $("body").css("background-color", "black");
}else{
  $("body").css("background-color", "white");
}

});

body{
  transition: background-color 0.3s ease-in-out;
}
p{height: 1000px;}
h1{
height: 400px;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hei">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis.   </p>
  <h1>Change to Black</h1>
</div>

Answer 2

您的$(window).scroll是正确的，但我认为您的代码缺乏正确的设置来执行您想要的操作。这是我用你的代码制作的一个工作样本，用于在滚动时块div进入视图时更改背景的颜色。

https://codepen.io/Nasir_T/pen/jmvwEP

希望这有帮助。

Answer 3

如果您只想在元素位于视口中时发生某些事情，您可以找到元素的顶部/底部位置，并将其与滚动距离和窗口底部进行比较。

Private Sub btnGO_Click()

    Dim rowNum, cellNum As Variant

    rowNum = Application.WorksheetFunction.Match(txtSKU.Value, Worksheets("AllSites").Range("B:B"), 0)

    If IsError(rowNum) Then MsgBox "SKU not found": Exit Sub

    If cbxSite.Value = "Fairburn" Then
        cellNum = "C" & rowNum
    ElseIf cbxSite.Value = "Aberdeen" Then
        cellNum = "D" & rowNum
    ElseIf cbxSite.Value = "University Park" Then
        cellNum = "E" & rowNum
    ElseIf cbxSite.Value = "Roanoke" Then
        cellNum = "F" & rowNum
    ElseIf cbxSite.Value = "Lathrop" Then
        cellNum = "G" & rowNum
    ElseIf cbxSite.Value = "Redlands" Then
        cellNum = "H" & rowNum
    End If

    If IsError(cellNum) Then MsgBox "Site not found": Exit Sub

    txtPrice.Value = Worksheets("AllSites").Range(cellNum).Value

End Sub

$(window).on('resize scroll',function() {
  var $div = $('div'),
      $body = $('body'),
      st = $(this).scrollTop(),
      wh = $(this).height(),
      wb = st + wh,
      dh = $div.height(),
      dt = $div.offset().top,
      db = dh + dt;
  if (dt < wb && db > st) {
    $body.addClass('color');
  } else {
    $body.removeClass('color');
  }
})

section {
  height: 150vh;
}
div {
  background: black;
  height: 200px;
}
.color {
  background: red;
}

Answer 4

我认为你真正的问题是你的CSS中第一个无效的问题。看看reference。如果您要选择.colorChange内的所有#pageWrapper，请使用：

#siteWrapper .colorChange {}

同时删除＆＃34;＃＆＃34;在你的HTML中如下：

<div id="block-yui_3_17_2_2_1495044195108_28541" class="colorChange">

我还建议你两个限制你的事件，这样你就不会听每一个滚动事件，这可能会大大减慢你的系统速度，但每50秒左右。查看ScrollSpy或一些jquery throtte插件。

CSS在某一点改变背景颜色

4 个答案: