JQuery滚动和一些不那么隐藏的标题

我试图产生一个固定位置的标题，一旦用户开始滚动浏览页面就会出现。我正在使用JQuery（在也使用Angular的页面上），并希望在scrollTop> 250px时立即淡出，并立即消失（我一直使用display：none），现在是< 250px。JQuery滚动和一些不那么隐藏的标题

当慢慢滚动我的代码工作，但下来的速度应该被隐藏在250像素关口上方再次出现的H1滚动起来时：https://jsfiddle.net/gilestaylor/jpaqbm36/

谁能推荐一个修复？或者更聪明的做法呢？（我仍然在学习绳索，所以任何提示非常感谢！）

HTML 
<header> 
    <h1>Order some food</h1> 
</header> 
<div id="bar"> 
<h1>Order some food</h1> 
</div> 

JS 
$(function() { 
    $(window).scroll(function() { 
    if ($(window).scrollTop() > 250) { 
     $('#bar').css({ 
     'height': '50px' 
     }); 
    $('#bar h1').fadeIn(1000);   
    } 
    else { 
     $('#bar').css({ 
      'height': '0' 
     }); 
     $('#bar h1').css({'display': 'none'}); 
    }; 
    }); 
});

来源

2016-06-26 dedaumiersmith

致电fadeIn()需要时间。当你隐藏元素，甚至当再次调用.fadeIn()时，它仍然可能是动画。因此，在执行这些操作之前，您应该使用.stop()来停止动画。此外，您可以使用.hide()来隐藏元素，而不是.css({'display': 'none'})。

jsfiddle

要真正使代码虽然没错，你应该做出改变只在需要时。也就是说，您应该执行代码，以便仅在未显示条形图时才显示条形，并且只有在显示条形码时才执行代码以隐藏它。

$(function() { 
    var isBarShown = false; 

    function updateBar() { 
    if ($(window).scrollTop() > 250) { 
     if (!isBarShown) { 
     $('#bar').css({'height': '50px'}).find('h1').fadeIn(1000); 
     isBarShown = true; 
     } 
    } else { 
     if (isBarShown) { 
     isBarShown = false; 
     $('#bar').css({'height': '0'}).find('h1').stop().hide(); 
     } 
    } 
    } 

    $(window).scroll(function() { 
    updateBar(); 
    }); 

    updateBar(); 
});

注：在这种情况下，没有必要呼吁.fadeIn()，因为永远不会有对.fadeIn()连续两次调用中间没有调用.hide()之前调用.stop()。

jsfiddle

来源

2016-06-26 23:57:16

@穆罕默德·优素福 - 好一点，但现在，我看它一遍，我想应该有一个检查，以便代码没有得到执行，除非它是从上面交换和低于250点。 –

但没有.stop（）之前fadeIn（）它仍然显示后动画..它对我工作正常https://jsfiddle.net/jpaqbm36/6/ –

@ Mohamed-Yousef - 当窗口滚动后超过250点，'.stop（）.fadeIn（）'会被反复调用。由于元素已经完全显示，所以它没有做任何事情，但继续调用它似乎是错误的。 –

而不必2名不同的头，你只能有一个头和用jQuery调整它，当你向下滚动。检查这个https://jsfiddle.net/ktriek/jpaqbm36/5/

$(function() { 
    $(window).scroll(function() { 
    var header = $('header'); 
    if ($(window).scrollTop() > 250) { 
      header.addClass("smaller");   
     } 
     else { 
       header.removeClass("smaller");  
     }; 
    }); 
});

来源

2016-06-27 00:09:16 Kld

非常感谢。在这种情况下，我需要两个不同的标题，因为在第一个页面中我包含了一个图像，但对于我正在构建的另一件事，这是一个非常有用的提示。 – dedaumiersmith

JQuery滚动和一些不那么隐藏的标题

回答

相关问题