问题：

当滚动到窗口顶部时，元素切换可见性

常茂

2023-03-14

我使用JQuery在向下滚动时隐藏一个元素，并在向上滚动到屏幕顶部时显示它。我遇到的问题是，每当我滚动到窗口顶部时，显示的元素会立即再次隐藏。

$(window).on('scroll', function() {
  if ($(window).scrollTop() > 0) {
    $('.myElement').hide();
  } else {
   $('.myElement').show();
  }
  console.log($(window).scrollTop());
});

我记录了滚动位置，当它滚动到顶部时，它看起来肯定保持在0，所以不太清楚为什么会发生这种情况。我甚至尝试使用大于0的数字，例如10，但同样的情况仍然发生。任何帮助都将不胜感激。

编辑：我根据要求添加了一些简单的html标记，其设置与我的实际代码几乎相同；

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
    .scroll {
        transform: translate3d(0,-100%,0);
        transition: all 0.3s ease-in-out;
    }
</style>
</head>
<body>

<div class="wrapper" style="position: absolute; top: 0; left: 0; width: 100%; height: 100;">
<div class="block" style="position: relative; width: 100%;
height: 2000px; background-color: red;">
    <div class="headerWrapper" style="position: fixed; top: 0; left: 0; width: 100%;">
        <div class="first" style="position: relative; width: 100%; height: 200px; background-color: black;"></div>
        <div class="second" style="position: relative; width: 100%; height: 100px; overflow: hidden;">
            <div class="element" style="position: absolute; top: 0; left: 0; width: 100%; height: 200px; background-color: blue; transition: all 0.3s ease-in-out;"></div>
            </div>
       </div>
    </div>
</div>

<script>

$(window).on('scroll', function() {
    if ($(window).scrollTop() > 0) {
        $('.element').addClass('scroll');
        setTimeout(function() {
            $('.second').hide();
        },300);
    } else {
        $('.second').show();
        $('.element').removeClass('scroll');
    }
 console.log($(window).scrollTop());
 });
</script>

</body>
</html>

共有2个答案

李博达

2023-03-14

您的初始代码运行良好。这里有一个有效的例子。有什么问题吗？

$(window).on('scroll', function() {
  if ($(window).scrollTop() > 0) {
    $('.element').addClass('scroll');
  } else {
    $('.second').show();
    $('.element').removeClass('scroll');
  }
});

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
    .scroll {
      transform: translate3d(0, -100%, 0);
      transition: all 0.3s ease-in-out;
    }
  </style>
</head>

<body>

  <div class="wrapper" style="position: absolute; top: 0; left: 0; width: 100%; height: 100;">
    <div class="block" style="position: relative; width: 100%;
height: 2000px; background-color: red;">
      <div class="headerWrapper" style="position: fixed; top: 0; left: 0; width: 100%;">
        <div class="first" style="position: relative; width: 100%; height: 200px; background-color: black;"></div>
        <div class="second" style="position: relative; width: 100%; height: 100px; overflow: hidden;">
          <div class="element" style="position: absolute; top: 0; left: 0; width: 100%; height: 200px; background-color: blue; transition: all 0.3s ease-in-out;"></div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

隆璞

2023-03-14

尝试在滚动事件侦听器之前添加“关闭”，以删除以前应用的所有侦听器：

$(window).off('scroll').on('scroll', function() {
  if ($(window).scrollTop() > 0) {
    $('.myElement').hide();
  } else {
   $('.myElement').show();
  }
  console.log($(window).scrollTop());
});

类似资料：

当内部元素滚动位置到达顶部/底部时，防止父元素滚动？

问题内容：我有一个“浮动工具箱”-的div 。效果很好。但是，当在该框内滚动（使用鼠标滚轮）并到达底部或顶部时，父元素将“接管”“滚动请求”：工具箱后面的文档将滚动。 -这很烦人，而不是用户的“要求”。我正在使用jQuery，并认为可以使用event.stoppropagation（）停止此行为：它确实输入了该函数，但是仍然会发生传播（文档滚动）很难在SO（和Google）上搜索此主题，
防止滚动从元素滚动到窗口

问题内容：我有一个模态框窗口（弹出窗口），其中包含一个iframe，并且在该 iframe中有一个可滚动的 div 。当我滚动iframe的内部DIV，并且达到其上限或下限时，浏览器本身的窗口就会开始滚动。这是不想要的行为。我已经尝试过类似的操作，当鼠标进入弹出框区域时，该操作会在onMouseEnter时终止主窗口滚动： e.preventDefault（）由于某些原因无法正常
jQuery滚动到可滚动div循环中元素的顶部

我正忙着建立一个页面，在那里，比赛的计分室将能够看到现场结果，因为评委们会为每个参赛作品打分。除此之外（每10秒检查一次更新），还有一个功能可以检查舞台上的当前条目（用绿色标记），这将滚动计分室的块，以始终在页面顶部显示当前条目。然而，这创造了一个无休止的循环上下滚动的整个时间。初始滚动工作正常，但由于当前项的位置已更改，jQuery再次向下滚动，使该项现在处于新的偏移量。我的代码当前如下
绑定类切换到窗口滚动事件

问题内容：当用户将浏览器窗口滚动到某个点以下时，我正在切换#page div的类。到目前为止，我所做的工作正常： http://jsfiddle.net/eTTZj/29/ （当他们将窗口滚动到标题（100像素）以下时，将切换该类）虽然，如果我错了，请纠正我，但我认为这不是使用Angular进行此操作的正确方法。相反，我认为执行此操作的最佳方法是使用ng-class并将布尔值存储在范围中。
滚动时将对象固定到浏览器窗口顶部

问题内容：最近，我在新的gmail和HTML5 bing预览中看到了一个有趣的新功能，该功能可在滚动时将导航栏固定在浏览器窗口的顶部。该栏可能从页面向下100px开始，但是当您滚动并到达浏览器窗口顶部时，它会固定在那里，直到您向上滚动到其最初位置为止。我的问题是；我该怎么做或做类似的事情？希望您能理解我的问题以及我要描述的内容。问题答案：如果您希望元素在页面上进一步向下移动，然后在向
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

本文向大家介绍vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法，包括了vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法的使用技巧和注意事项，需要的朋友参考一下有时候我们需要页面滚动条滚动到某一固定的位置，一般使用Window scrollTo() 方法。语法就是：scrollTo(xpos,ypos) xpos：必需。要在窗口文档显示区左上角显示的文档的

当滚动到窗口顶部时，元素切换可见性

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档