Question

编辑：我想我在这里有些困惑，我想保留第一个添加到购物车，同时隐藏第二个粘贴式，仅在第一个离开用户视图时显示

我基本上有2个添加到购物车按钮，第二个添加到购物车按钮是可见的<768px并显示在屏幕底部。

当第一个添加到购物车在屏幕上可见时，我如何隐藏第二个添加到购物车

这也可以仅使用CSS完成

我的第二个粘性添加到购物车以供参考的代码

.sticky-add-to-cart{
    display: none;
}

@media only screen and (max-width : 768px) {
  .sticky-add-to-cart {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    top: inherit !important;
    z-index: 9999;
    display: block;
  }
}

Answer 1

如果您想在用户滚动到第一个按钮时显示第二个按钮，那么您将需要一些JavaScript来实现。

HTML

<button id="btn1"></button>
<button id="btn2"></button>

CSS

#btn1 {
  display: block;
}

#btn2 {
  display: none;
}

#btn2.show {
  display: block;
}

JS

var scrollAmount;
var btn2 = document.getElementById("btn2");
window.addEventListener("scroll", function() {
  scrollAmount = window.scrollY;
  if(scrollAmount > 768px) {
    btn2.classList.add("show");
  } else {
    btn2.classList.remove("show");
  }
});

768px是滚动量，之后第一个按钮将从视口中消失。

Answer 2

您可以采用原子方法。创建几个帮助器类，使它们仅在超过一定宽度时才可见。如果需要，您也可以在其他组件中重用这些类。

let pools = document.querySelectorAll(".pool"); 
let randomNumber;
var nums = [];
    ranNums = [0,1,2,3,4,5,6,7,8];
// let i = 0;
let didHave;

addClickForPools();

function addClickForPools(){ //addEventListener
    for(let i = 0; i < pools.length; i++){
        pools[i].addEventListener("click", userMove);

        function userMove(){
            let h1 = document.createElement("H1");
            let t = document.createTextNode("X")
            h1.appendChild(t);
            pools[i].appendChild(h1);
            nums[i] = i;
            
                computerMove();
              
            removeClickForPools();
            // pools[i].innerHTML = 
            function removeClickForPools(){
                pools[i].removeEventListener("click", userMove);
            }
        }
    }

}
function computerMove(){

   randomNumber = randomNum();


   
    let h1 = document.createElement("H1");
    let t = document.createTextNode("O")
    h1.appendChild(t);
    pools[randomNumber].appendChild(h1);
   

    
  
}


function randomNum(){
    let n = Math.floor(Math.random() * 9);
    didHave = nums.includes(n);

    while(didHave == true){
         n = Math.floor(Math.random() * 9);
        didHave = nums.includes(n);
    }
    nums.push(n);
    return n
}

Answer 3

.container {
  display: inline-block;
}
span {
  white-space: nowrap;
}
.button {
  position: sticky;
  display: inline-block;
  top: 0;
  left: 0;
}

<div class="container">
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah <button class="button">Button</button> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
  <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span><br>
</div>

仅当另一个元素不在屏幕上时才显示一个元素

3 个答案: