Question

我正在尝试在滚动窗口时将按钮固定在顶部，只要按钮到达顶部然后修复，请需要您的帮助，我正在使用javascript代码或者如果您有合适的代码有关javascript或jquery然后请建议我，

我正在显示一个快照，清除你想要在此图像中执行的操作，

image is here please click to see clearly my problem

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代码，也请不要忘记告诉我我错过了什么......

Answer 1

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

$(document).ready(function() {

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

它在每个滚动事件中执行的操作是检查window顶部的滚动位置，并使用if检查它是添加还是删除预先制作的stick类。但是，当然您必须在此if支票中选择自己的号码。

我还玩了一段代码片段，所以你可以看到它是如何工作的

＆＃13;

$(document).ready(function() {

  $(window).scroll(function () {      
    if ($(window).scrollTop() > 10) {
      $('#NUMBER').addClass('stick');
    }
    if ($(window).scrollTop() < 11) {
      $('#NUMBER').removeClass('stick');
    }
  });
});

＆＃13;

body {
  height: 600px;
}

.stick {
  position: fixed;
  top: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="NUMBER">Press me</button>

＆＃13;

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

1 个答案: