javascript - jQuery 窗口滚动,向下滚动返回

标签 javascript jquery html css

使用 jQuery 滚动功能创建一个粘性标题,有时在特定高度(我猜)当我向下滚动时,返回到页面顶部。

记录了这个:http://take.ms/s9mGh8

这是我的功能:

$(window).scroll(function(e){
    $('#main').toggleClass('fixed', $(this).scrollTop() > $('#header').height()+25);
});

我该如何解决这个问题?

最佳答案

问题是固定元素不占用 DOM 中的空间。所以这里发生的是你的标题占用空间,你滚动页面,用 position:fixed 设置标题,所以它不再占用空间,你所有的元素向上移动,滚动条消失。

为防止这种行为,您需要在更改类时将“缺失高度”添加到文档中。 StickyKit 使用的常用技术例如,如果要添加占位符 div。

您可以在此处查看基本代码:https://jsfiddle.net/jaL765t1/

var flag = false;
$(window).scroll(function(e){
  var passed_point = $(this).scrollTop() > $('#header').height()+25;

  if(passed_point && !flag){
    var surrogate = $('<div>', {
        'class' : 'js-surrogate',
        css : {
        height : $('#header').height()
      }
    });
    $('#header').before( surrogate );
    $('#main').addClass('fixed');

    flag=true;
  }else if(!passed_point && flag){
    $('#main').removeClass('fixed');
    $('#header').prev('.js-surrogate').remove();
    flag=false;
  }  
});

当然,这段代码不好,但您可以轻松地将其用作起点。

关于javascript - jQuery 窗口滚动,向下滚动返回,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40268604/

相关文章:

javascript - 使用 fullpage.js 在鼠标滚动上推进不止一页

javascript - jQuery slider 索引

javascript - 如何在异步页面加载时更改导航 url

javascript - 您可以从 i 元素 onclick 访问事件数据吗?

javascript - Redux-thunk 派发一个 Action 并等待重新渲染

javascript - 使用 jQuery .load() 将一个页面的脚本部分加载到另一个页面中

JavaScript 最佳实践原型(prototype)

c# - 将字符串转换为日期时间-javascript

html - 仅 html 文件的 Bash diff 正文文本

javascript - 如何在 slider 中播放视频时暂停 Bootstrap 2 轮播