jQuery根据页面滚动添加/删除类答案

【问题标题】：jQuery Adding/Removing class according to page scrolljQuery根据页面滚动添加/删除类
【发布时间】：2019-08-28 19:44:53
【问题描述】：

我有一个代码 sn-p，我在我的网站中使用它来在用户向下滚动网页时显示号召性用语 btn。但它不适用于我的一个网站。我已经研究过，找不到错误。这是link to the page I am using this code。为什么 JS 不给元素添加“atcbottomactive”类？

 $(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 1100) {
        $(".atcbottom").addClass("atcbottomactive");
    } else {
        $(".atcbottom").removeClass("atcbottomactive");
    }
});

@media only screen and (min-width:1000px) {
	
    .atcbottom {
        display: none!important
    }
    .btnn {
        margin-top: -60px!important
    }
}

@media only screen and (max-width:999px) {
    .atcbottomactivepopup {
        margin-bottom: 60px
    }
}


.atcbottom {
    height: 60px;
    width: 100vw;
    position: fixed;
    z-index: 102;
    background: #fff;
    bottom: -100px;
    transition: 2s;
    left: 0;
}

.atcbtn {
    height: 40px;
    background: #4cae4c;
    width: 90vw;
    margin-top: 10px;
    margin-left: 5vw;
    border: none;
    color: #fff;
    font-size: 20px;
}

.atcbottomactive {
    bottom: 0
}

<div style="height:1000px; width: 100%; background: blue">

<div class='atcbottom'>
      <div class="container">
		<div class="row">
          <a href="#ProductPrice-product-template">
          <button type="button" class="atcbtn">Call to action</button>
          </a>
        </div>
      </div>
  	</div>
  


  </div>

【问题讨论】：

标签： javascript jquery html css scroll

【解决方案1】：

您可以使用纯 Javascript 来实现，这是我专门为您编写的示例。希望我的代码有用！

window.addEventListener("scroll", function(e){
  e=(e||window.event);
  e.preventDefault();
  
  const topOffset=window.scrollY;
  document.querySelector("#scrollOffset").innerHTML="ScrollTop: "+topOffset+"px";
  
  if(topOffset> 100 ){
    document.querySelector(".box").classList.add("scrollEffect");
  
  }else document.querySelector(".box").classList.remove("scrollEffect");
  
});

span#scrollOffset{
  position: fixed;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  padding: 4px 8px;
  padding-top: 6px;
  border-radius: 4px;
  background-color: rgba(0,0,0,.5);
  z-index: 10;
  color: white;
  font-size: 12px;
  font-family: Arial, sans-serif;
}

.box{

  width: 200px;
  height: 200px;
  background-color: #eee;
  padding: 20px;
  
}

.box.scrollEffect{
  background-color: yellow;
}

<body style="min-height: 200vh">
  <span id="scrollOffset">ScrollTop: 0px</span><br>
  <div class="box">This box class must change when scroll even fires !</div>
<body>

【讨论】：

【解决方案2】：

当我查看您的网站并打开我的开发者控制台时，我看到了以下错误：

您的站点上似乎可以使用 jQuery，但由于某种原因没有保存到变量 $。您必须使用 jQuery 变量来访问它。

【讨论】：

感谢您的帮助！我刚开始用JS和JQuery，我应该如何使用JQuery变量访问？
使用jQuery 而不是$。例如，不要写$(".atcbottom").removeClass("atcbottomactive");，而是写jQuery(".atcbottom").removeClass("atcbottomactive");。
我做了更改，但没有用：eyusatzpcq29rujb-9315549265.shopifypreview.com/collections/…，同样的错误也一直出现在控制台上
$ 出现在代码中的其他几个位置，例如 $(window).scroll(function() {。确保你得到所有这些。
我已将所有$ 替换为jQuery，现在控制台以jQuery 显示错误

【解决方案3】：

我查看了您的网站，在开发控制台中它说它没有重新调整 $ 符号。您可以将 $ 符号更改为 jQuery。但是如果你想使用 $ 符号，你需要加载 jquery 的 slim.min 版本。

【讨论】：