Question

我有一个代码段，当用户向下滚动网页时，我在网站上使用该代码段显示号召性用语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>

Answer 1

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

您的站点上似乎可以使用jQuery，但是由于某些原因未将其保存到变量$中。您必须使用jQuery变量来访问它。

Answer 2

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

Answer 3

您可以使用纯 JavaScript 来完成此操作，这是我为您编写的示例。希望我的代码有用！

  ID col1 col2
1  1    A  ABA
2  1    B  ABA
3  1    A  ABA
4  2    C  CCD
5  2    C  CCD
6  2    D  CCD

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;
}

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

3 个答案: