Question

我试图更改我的徽标的css，当它到达网站上的某个点时，然后在特定部分完成后进行后退。但我无法正确地做到这一点。有什么帮助吗？

我已经制作了这个滚动功能，但它只能单向工作。

$(document).ready(function () {
   $(window).scroll(function () {
    if( $(this).scrollTop() > 600 ) {
      $(".uk-responsive-height").css("display", "none");
      $(".uk-logo-inverse").css("display", "block");
   } else if( $(this).scrollTop() > 999) {
      $(".uk-logo-inverse").css("display", "none");
      $(".uk-responsive-height").css("display", "block");
   }
  });
});

这对我有用。我不知道这是不是最好的方法。我调整了数字以更适合我的页面。

$(document).ready(function () {
    $(window).scroll(function () {
     if( $(this).scrollTop() > 1700 ) {
       $(".uk-responsive-height").css("display", "block");
       $(".uk-logo-inverse").css("display", "none");
    return;
 }
 if ( $(this).scrollTop() > 600) {
    $(".uk-responsive-height").css("display", "none");
    $(".uk-logo-inverse").css("display", "block");
 }
 if ( $(this).scrollTop() < 600) {
    $(".uk-responsive-height").css("display", "block");
    $(".uk-logo-inverse").css("display", "none");
  }
   });
 });

Answer 1

尝试先检查最高scrollTop()并在此之后中断函数

if( $(this).scrollTop() > 999 ) {
    $(".uk-logo-inverse").css("display", "none");
    $(".uk-responsive-height").css("display", "block");

    return;
} 

if( $(this).scrollTop() > 600) {
    $(".uk-responsive-height").css("display", "none");
    $(".uk-logo-inverse").css("display", "block");
}

在此评论之后

也许我需要这样说。有两个标识，一个是普通白色，另一个是黑色。此代码几乎可以工作，但开始显示这两个徽标。我只需要它＆＃34; .uk-logo-inversed为600-1000之间的显示块应该被移除，除非回到那些特定的像素

试试这个

if ($(this).scrollTop() > 600 && $(this).scrollTop() < 1000) {
    $(".uk-logo-inversed").css("display", "block");
    $(".uk-responsive-height").css("display", "none");
} else {
    $(".uk-logo-inversed").css("display", "none");
    $(".uk-responsive-height").css("display", "block");
}

或代码较少的解决方案

$(".uk-logo-inversed")[$(this).scrollTop() > 600 && $(this).scrollTop() < 1000 ? 'show' : 'hide']();
$(".uk-responsive-height")[$(this).scrollTop() > 600 && $(this).scrollTop() < 1000 ? 'hide' : 'show']();

如何正确使用scrolltop以使其触发两次？

1 个答案: