Question

当您从顶部向下滚动时，我尝试将不同的样式应用于标题。基本上我想要它，这样如果你在顶部滚动然后应用样式1，但如果你没有在顶部滚动然后应用样式2.

我尝试过使用while和for循环来实现这一点，但都失败了。下面的jQuery示例确实有效，但由于某种原因不在这个例子上。但是我宁愿使用JavaScript而不是jQuery，因为我正在学习JavaScript。

有人可以告诉我应该用什么：一段时间或if语句？并且有人可以告诉我我的尝试做错了吗？

感谢您的帮助。

＆＃13;

// ATTEMPT 1

var headerWrap = document.getElementById('header-wrap');
var h = headerWrap.scrollTop;

function changeHeaderOpacity() {
    "use strict"; // wtf is this?
    while (h > 0) {
        headerWrap.addClass('scroll-opacity-change');
    }
    headerWrap.removeClass('scroll-opacity-change');
}

// ATTEMPT 2

/*
var headerWrap = $('#header-wrap');
$(window).scroll(function() {
    headerWrap.addClass('scroll-opacity-change');
    if($(this).scrollTop() <= 0) {
        headerWrap.removeClass('scroll-opacity-change');
    }
});
*/
/*

// ATTEMPT 3

var headerWrap = document.getElementById('header-wrap');
var h = headerWrap.scrollTop;

function changeHeaderOpacity() {
    "use strict"; // wtf is this?
    if (h > 0) {
        headerWrap.addClass('scroll-opacity-change');
    } else {
    headerWrap.removeClass('scroll-opacity-change');
    }
}
*/

＆＃13;

body{
  height:1000px;
}

#header-wrap{
  height:100px;
  width:100%;
  background:#0f0;
}

.scroll-opacity-change{
  background:#f00;
}

＆＃13;

<div id="header-wrap">

</div>

＆＃13;

Answer 1

首先，您需要添加侦听器以检测窗口滚动。

{{$errors->has('email') ? 'has-error' : null }}

现在你需要将滚动日志存储在几个变量中，以确定你是否向下滚动，你可以使用以下内容：

$(document).ready(function() {
$(window).scroll(function() {
     //do the header styling using .style
   });
});

最终代码：

 var currentScroll = window.pageYOffset || document.documentElement.scrollTop;
   if (currentScroll > lastScrollTop){
       // You are down scrolling
   } else {
      // You are up scrolling
   }
   previousScroll = currentScroll;

我希望这会有所帮助，欢迎您提出意见。

Answer 2

使用class而不是id;

<div class="header-wrap">

</div>

和

$(window).scroll(function() {
  $('.header-wrap').addClass('scroll-opacity-change');      
  if($(this).scrollTop() <= 0) {
       $('.header-wrap').removeClass('scroll-opacity-change');
  }
});

从顶部滚动后更改元素样式

2 个答案: