时间戳

首页 > 解决方案 > 我们如何修复窗口滚动顶部的按钮？

javascript - 我们如何修复窗口滚动顶部的按钮？

问题描述

当我们滚动窗口时，我正在尝试修复顶部的按钮，一旦按钮到达顶部然后修复，请需要您的帮助，我正在为此使用 javascript 代码，或者您是否有与 javascript 相关的合适代码或者 jquery 然后请建议我，

我正在展示一张快照，让你清楚我想在这张图片中做什么，

图片在这里请点击看清楚我的问题

This is my button code

<a href="" class="btn btn-primary HELPLINE NUMBER " id="NUMBER">HELPLINE NUMBER</a>

和 This is javascript code what i have tried: 

<script>

window.onscroll= function(){ myfunc(); }

var location_v=document.getElementById("NUMBER");
var pixtop=location_v.offsetTop;

function myfunc()
{


    if(window.pageYOffset >= pixtop )
    {

        //var a=document.getElementById('NUMBER');
                location_v.classList.add('stick');

    }
    else
    {
        a.classList.remove('stick');
        }

}


</script>

和CSS代码如下：

.stick {
  position:fixed;
  top: 10px;
  width: 100%;
}

如果您有任何概念性的 javascript 或 jquery 代码，请不要忘记告诉我我缺少什么...

标签： javascriptjqueryhtml

解决方案

这是一个可以为您解决问题的脚本：

$(document).ready(function() {

  $(window).scroll(function () {      
    if ($(window).scrollTop() > 90) {
      $('#NUMBER').addClass('stick');
    }
    if ($(window).scrollTop() < 91) {
      $('#NUMBER').removeClass('stick');
    }
  });
});

它所做的是在每个滚动事件上检查 a 顶部的滚动位置window并使用if检查它添加或删除您的预制stick类。if但当然，您必须在此检查中选择自己的号码。

我也玩过一个代码片段，所以你可以看看它是如何工作的

$(document).ready(function() {

  $(window).scroll(function () {      
    if ($(window).scrollTop() > 10) {
      $('#NUMBER').addClass('stick');
    }
    if ($(window).scrollTop() < 11) {
      $('#NUMBER').removeClass('stick');
    }
  });
});
body {
  height: 600px;
}

.stick {
  position: fixed;
  top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="NUMBER">Press me</button>

推荐阅读