Question

我有一个回到顶部的链接，但即使页面位于顶部

也会显示

<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;
}

Answer 1

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;}

修改我已经为您添加了一些额外的代码。

.w-toplink默认隐藏
当用户滚动时，它变为0.7opacity（通过class .active）
当用户悬停链接时，它变得完全可见（不透明度：1）

Answer 2

这样做：

SELECT
    id, booking_id, todo_type, due, urgent, status, comment, create_user, create_date, delete_date
    FROM
    [TODO]
UNION ALL
SELECT
    id, booking_id, todo_type, due, urgent, status, comment, create_user, create_date, delete_date
    FROM
    [TODO_OPERATOR]

并将其添加到您的CSS文件中：

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

Answer 3

听起来很有趣......

您可能只需为Scroll添加一个eventListener即可。这在vanillaJS或jQuery中是可能的......

有关滚动的更多信息，请参阅此处：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" );
});

＆＃13;

$("a.w-toplink").hide();
$(window).scroll(function() {
  $("a.w-toplink").show();
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

    </script>

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

3 个答案: