链接隐藏，直到滚动使用jquery

link hidden until scroll using jquery

本文关键字：jquery 滚动 隐藏 链接      更新时间：2023-09-26

我有一个back to top的链接但是即使页面在顶部它也会显示

<a class="w-toplink active" href="#"><i class="fa fa-chevron-up"></i></a>

我希望它被隐藏，直到用户开始滚动页面-这是可能的吗?如果有，怎么做?

另一件事，我已经尝试并试图做的是使链接改变悬停与不透明，但它似乎没有工作-谁能看到我哪里出了问题。

CSS 

.w-toplink {
display: block;
position: fixed;
bottom: -50px;
right: 30px;
text-align: center;
font-size: 14px;
padding-top:15px;
line-height: 50px;
height: 30px;
width: 50px;
border-radius: 5px;
opacity: 0;
z-index: 100;
-webkit-transition: background-color 0.3s, opacity 0.3s, bottom 0.3s;
transition: background-color 0.3s, opacity 0.3s, bottom 0.3s;
background-color: #333;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
}
.w-toplink.active {
bottom: 30px;
opacity: 0.7;
}
.w-toplink:hover {
opacity: 0.7;
}

jQuery:

$(window).scroll(function(){
    var scrollTop = $(window).scrollTop(),
        $toplink = $('.w-toplink');
    if(scrollTop > 0){
        $toplink.addClass('active');
    } else{
        $toplink.removeClass('active');
        }
});
CSS: 

.w-toplink{opacity:0; transition: opacity 200ms ease-in;}
    .w-toplink.active{opacity:0.7;}
    .w-toplink:hover{opacity:1;}

编辑我已经为你添加了一些额外的代码。

  1. 。w-toplink默认隐藏
  2. 当用户滚动时，它的不透明度变为0.7(通过类。active)
  3. 当用户将链接悬停时，它变得完全可见(不透明度:1)

这样做:

$(window).scroll(function () {
   if ($(this).scrollTop() > 0) {
       $('.w-toplink').fadeIn(250);
   } else {
       $('.w-toplink').fadeOut(250);
   }
});

并添加到你的CSS文件:

.w-toplink {
    display: none;
}

听起来很有趣…

有可能你必须简单地为滚动放置一个eventListener。在vanillaJS或jQuery中是可能的…

查看更多关于scroll的信息:https://api.jquery.com/scroll/

<a class="w-toplink active" href="#"><i class="fa fa-chevron-up"></i></a>

(假设您已经在使用jQuery CDN。

    <script type="text/javascript">
$("a.w-toplink").hide();
    $( window ).scroll(function() {
  $( "a.w-toplink" ).css( "display", "visible" ).fadeIn( "slow" );
});


$("a.w-toplink").hide();
$(window).scroll(function() {
  $("a.w-toplink").show();
});
.w-toplink {
display: block;
position: fixed;
bottom: 0;
right: 30px;
text-align: center;
font-size: 14px;
padding-top:15px;
line-height: 50px;
height: 30px;
width: 50px;
border-radius: 5px;
z-index: 100;
-webkit-transition: background-color 0.3s, opacity 0.3s, bottom 0.3s;
transition: background-color 0.3s, opacity 0.3s, bottom 0.3s;
background-color: #333;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
}
<a href="#" class="w-toplink stuff">Back to to top</a>
<p>Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem
  Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...
</p>
<ul>
  <li>Sample</li>
  <li>Sample</li>
  <li>Sample</li>
  <li>Sample</li>
  <li>Sample
    <p>Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem
      Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...
    </p>
  </li>
  <li>Sample</li>
  <li>Sample</li>
  <li>Sample</li>
  <li>Sample</li>
  <li>Sample
    <p>Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem
      Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...
    </p>
  </li>
  <li>Sample</li>
  <li>Sample</li>
  <li>Sample</li>
  <li>Sample</li>
  <li>Sample</li>
  <li>Sample</li>
  <li>Sample</li>
  <li>Sample</li>
  <li>Sample</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    </script>
相关文章：