隐藏标题并将它下面的div贴到滚动条顶部

-1

我试图隐藏标题，并在用户开始向下滚动页面时将div粘贴到顶部（仅位于标题下方）。隐藏标题并将它下面的div贴到滚动条顶部

它应该保持在顶部，直到用户从顶部到达350px。
当用户向上滚动时，只应显示标题，而不是其下面的div。

我试过css（粘滞和固定的位置），但它没有给出所需的结果。

这里是我的fiddle

这里是jQuery的（我不擅长），我试图（和别人的帮助下），但这是什么，我想实现只有25％。

$(function(){ 
    $(window).scroll(function(e) { 
    if($(this).scrollTop()>300){ 
     $('.header').fadeOut(); // Fading in the button on scroll after 300px 
    } 
    else{ 
     $('.header').fadeIn(); // Fading out the button on scroll if less than 300px 
    } 
    }); 
});

来源

2017-07-18 Rahul

为此，您将需要jQuery。你的js代码在哪里？ –

我已经将它加入小提琴中。 – Rahul

没有。没有js。 –

不能用css来做这个事情。检查jquerys Scroll event，可能soloution

$(window).scroll(function(e){ 
    var $el = $('.fixedElement'); 
    var isPositionFixed = ($el.css('position') == 'fixed'); 
    if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $('.fixedElement').css({'position': 'fixed', 'top': '0px'}); 
    } 
    if ($(this).scrollTop() < 200 && isPositionFixed) 
    { 
    $('.fixedElement').css({'position': 'static', 'top': '0px'}); 
    } 
});

增加了一个在全soloution的评论链接。

来源

2017-07-18 12:12:07 ThunD3eR

不，它不能解决我的目的，它也可能已经完成与CSS单独（位置：粘滞） – Rahul

从你正在尝试做psotion：粘不会涵盖所有方面。位置：sticky仅定位某个元素，但您描述的逻辑必须用事件触发，因此我推荐滚动事件。我会建议你尝试一下。 – ThunD3eR

尽管这个链接可能回答这个问题，但最好在这里包含答案的基本部分，并提供供参考的链接。如果链接页面更改，则仅链接答案可能会失效。 - [来自评论]（/ review/low-quality-posts/16748206） –

您需要将标题和.newswrap设置为position: fixed。然后这将工作。

$(document).ready(function(){ 
    $(window).scroll(function() { 
     if($(window).scrollTop() < 350) { 
      $("header").show(); 
      $(".newswrap").hide(); 
     } else { 
      $("header").hide(); 
      $(".newswrap").show(); 
     } 
    }); 
});

来源

2017-07-18 14:21:16 Nicholas

隐藏标题并将它下面的div贴到滚动条顶部

回答

相关问题