Question

当用户开始向下滚动页面时，我试图隐藏标题并将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
    }
  });
});

Answer 1

不能用css做这件事。检查jquerys Scroll event，可能的解决方案

$(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'}); 
  } 
});

在评论中添加了完整解决方案的链接。

Answer 2

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

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

隐藏标题并将滚动下方的div粘贴到顶部

2 个答案: