javascript - 淡化滚动条上的粘性 div-6ren

javascript - 淡化滚动条上的粘性 div

转载作者：行者123 更新时间：2023-11-28 05:41:55

好吧，我正在尝试让文本的粘性 div 在某个点出现在滚动条上。当您在同一部分向上滚动时，会再次消失。通过这个可爱的 jquery 代码，它可以正常工作，但是，当页面最初加载时，它仍然可见。然后继续在滚动时淡出，只是按照提示淡入，即使显示设置为无。

关于如何解决这个问题的任何想法...或者我应该放弃吗？

(function($) {
  $(document).ready(function() {
    $(window).scroll(function() {
      if ($(this).scrollTop() > 200) {
        $('.right').fadeIn(500);
      } else {
        $('.right').fadeOut(500);
      }
    });
  });
})(jQuery);

.left {
  float: left;
  width: 50%;
  margin: 0;
  padding: 0;
  display: block;
}
.right {
  float: left!important;
  width: 20%;
  margin: 0;
  left: 60%;
  padding: 0;
  display: none;
  position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
  <div class="left">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
      voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
      tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui
      in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
      ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
      velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
      veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
    </p>
  </div>
  <div class="right">
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  </div>
  <br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <p>ooops</p>

最佳答案

您是否尝试过在 CSS 中设置 display:none ？所以当你进入页面时它是隐藏的。然后在滚动 200px 后淡入，并在向后滚动时淡出？

这是您要找的吗？

<html>
<head>
<script src="https://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">
(function($) {          
   $(document).ready(function(){                    
       $(window).scroll(function(){                          
           if ($(this).scrollTop() >200) {
               $('.right').fadeIn(500);
           } else {
               $('.right').fadeOut(500);
           }
       });
   });
})(jQuery);
</script>
<style media="screen" type="text/css">
.left{
float:left;
width:50%;
margin:0;
padding:0;
display:block;
}
.right{
float:left!important;
width:20%;
margin:0;
left:60%;
padding:0;
display:none;
position:fixed;

}

</style>
</head>
<body>

<br>
<div class="left">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam 
</p>
</div>
<div class="right">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
<br>
<br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>ooops</p>

</body>
</html>

编辑:尝试使用 JQ 隐藏 .right div 并从 CSS 中删除 display:none 。不要在 css 中使用任何 display

还要确保您已安装 jQuery 库

请参阅下面的代码片段

   $('.right').hide();
(function($) {          
   $(document).ready(function(){      

       $(window).scroll(function(){                          
           if ($(this).scrollTop() >200) {
               $('.right').fadeIn(500);
           } else {
               $('.right').fadeOut(500);
           }
       });
   });
})(jQuery);

.left{
float:left;
width:50%;
margin:0;
padding:0;
display:block;
}
.right{
float:left!important;
width:20%;
margin:0;
left:60%;
padding:0;
position:fixed;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<div class="left">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam 
</p>
</div>
<div class="right">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
<br>
<br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>ooops</p>

关于javascript - 淡化滚动条上的粘性 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38852839/

文章推荐： javascript - 单击并显示更多元素

文章推荐： javascript - 为什么 insertBefore 显示错误

文章推荐： javascript - d3.js 直方图不适用于每个箱的总频率数组

文章推荐： ios - 如何为 UITableView 部分创建自定义背景？

javascript - 粘性/快速滚动不会向上滚动
我有一个脚本，允许在向下移动时快速滚动，但我无法让它允许用户向上滚动。 var items = $(".item"); var animating = false; $(window).scroll(
html - 粘性/固定下拉菜单不随页面滚动
所以我已经尝试解决这个问题几个小时了。有一个双层子菜单。如果子菜单的内容超出视口(viewport)，则当您滚动时子菜单项不会滚动。 click here to view the site 最佳答案
html - 控制移动浏览器滚动的速度(粘性)
有什么方法可以控制移动浏览器中用户在可滚动元素中滚动的速度或粘性吗？我专注于 android 浏览器。最佳答案不，滚动速度由浏览器控制(通常直接由计算机/设备上的设置控制)。我认为您的代码不会影
iis - Haproxy 粘性 session
我正在尝试使用 Haproxy 1.6.3 2015/12/25 和粘性 session 。我按照haproxy manual做的一切，但是，不幸的是，检查客户端浏览器我发现没有添加 cookie(平
java - 粘性 Eclipse 错误标记
清理并重建后，Eclipse Problems View 中出现错误标记，尽管一切都应该没问题。如何消除这种不一致的错误？最佳答案在这里，我回答自己接下来的步骤对我有用: 关闭 Eclipse
jquery - 粘性 div 工作不正确
我用这个脚本制作了粘性 div - $(window).scroll(function() { var leedoffset = $('.leed_block').offset().top;
jquery - 粘性 div 在滚动时不会粘在顶部
我希望我的 div 调用:如果我向下滚动，top 将粘在顶部，但现在它不会粘在顶部。我在这段代码中使用 jQuery: $(window).scroll(function(){ if (
javascript - 粘性 header /Javascript
早上好，我正在为我的网站制作一个粘性 header ，我已经让它工作了，但它似乎卡入到位，我想要顺利!我该怎么做？我的网站:http://www.trevorpeters.co.uk/tpwebde
jquery - 粘性 Bootstrap 导航栏不工作
我有一个用于我正在处理的小测试站点的导航栏，我需要一些帮助。我正在使用 Bootstrap(您可能会说)但无法弄清楚如何在您向下滚动时让我的导航栏保持在屏幕顶部。我希望导航栏保持在超大屏幕下方，直到您
html - 粘性 CSS 页脚损坏
我的页脚设计为位于页面底部，即使其上方的 div 仅包含少量内容。它直到最近才起作用，我似乎以某种方式破坏了它。你能看看吗？提前致谢。 CSS: body { margin: 0;
css - 粘性 flexbox 页脚未固定到底部
我想在加载时让整个 UI 适合屏幕，但我的页脚没有固定在移动设备上的 View 底部。在桌面网络浏览器上，它可以完美运行。当我在移动网络浏览器上查看此内容时，页脚位于页面下方，使页面可滚动。它不应该
html - 粘性 Div 需要被吃掉
我有一个问题。我正在创建一个由页眉、正文和页脚组成的单栏网站。在调整大小时，我可以让页脚粘在页面底部，但我的问题是这样的。如何让窗口在调整大小时“吃掉”页脚 div 而不是将其向上推？一个很好的例子是
javascript - 粘性 header 在滚动时无法正常工作
我正在尝试实现一个粘性标题，在滚动超过 100-150 像素之前不会发生任何事情。向上滚动时它会显示出来，向下滚动时它会再次隐藏，当您滚动回页面顶部时也会返回到它的原始状态。这正是我想要的外观/感觉
html - 粘性 header 始终可见？
我正在使用一个名为“Thematosoup 的 Sticky header”的 WordPress 插件，我对此非常满意，但标题仅出现在一些像素之后，并不总是在顶部可见。有谁知道我如何修改代码以使其始
javascript - 粘性 header 锯齿状运动
我目前正在创建一个网站，遇到了一个问题，每当我滚动我的粘性标题时，页面就会跳到下一个元素的底部，有人知道这是为什么吗？我已经尝试更改页面上基本上所有元素的填充，包括横幅、标题、文本本身，甚至 anc
html - 如何使用 CSS 粘性
我创建了一个简单的表格，顶部应该有粘性标题 (TR)。但这不起作用。我该如何修复此代码？谢谢 HELLO hello 5hello 5 hello 5hello 5 HELLO T
javascript - 创建两个不同的标题——粘性/滚动和顶部
使用我当前的代码，当页面加载时，白色条形标题位于顶部。当你滚动时，它会消失，当你滚动到顶部时，白色标题又回来了。所以我取得了一些进步。我想要得到的是当滚动条在顶部时有一个透明的标题:(https://
html - 粘性 header 到相对父级并溢出
我到处都看到这个问题的变体，但似乎没有一个能解决我的问题。我有一个高大的页面，由于内容原因已经有一个 Y 滚动条。部分内容是一个div style="position: relative;"，暂且称之
html - 粘性 header 卡在网站中间
我创建了一个 header ，位置设置为粘性，顶部设置为 0。但是，如果我向下滚动页面，标题会在某个时候停止随页面滚动。我认为这很容易解决，但我太笨了... 我试图删除其他元素，因为我认为它们与标题
jquery - 粘性 header 在断点处留下大空间
我的代码有点卡在粘性 header 上。如果达到 770px 点，标题将缩小。但是当我尝试在浏览器上进行测试时，这会给我带来一些问题。尝试在全尺寸浏览器中加载页面(>770)并将其缩小到(770)，

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 淡化滚动条上的粘性 div