javascript - 降低滚动时 div 的高度

标签 javascript jquery html scroll

我有一个介绍 div,它计算浏览器窗口高度并填充屏幕,然后用户可以向下滚动到下面的主页内容。

<body>
    <div id="intro"></div>
    <div id="main"></div>
</body>

我使用以下 JS 来计算窗口高度并将其附加到 intro div:

  resizeWindow();
  $(window).resize(resizeWindow);

  function resizeWindow() {
    var ww = $(window).width();
    var bh = $(document).height();
    var wh = $(window).height();
    featureHeight = wh - 0;
    $('#intro').css({'height':featureHeight+'px'});

  }

我试图做的是在页面滚动时减小介绍 div 的高度,一旦高度达到 0 并且用户到达主 div 内容,我可以将其删除,以便用户无法再滚动备份到它。

任何帮助将不胜感激。

最佳答案

var $intro = $('#intro');
$('#container').scroll(function(){
    $intro.height($intro.height() + $intro.offset().top);
    $(document).scrollTop();
    if ($intro.height() <= 0) {
        $intro.remove();
    }
});

您实际上是从 #intro 中删除高度,直到它达到零。不过,它有点依赖于页面等于/小于 intro 元素本身。

http://jsfiddle.net/xvh4gbb2/1/

关于javascript - 降低滚动时 div 的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25735460/

相关文章:

javascript - 如何在 jquery 的 html 中添加变量

javascript - 使用次要和主要刻度 d3js 创建波德图

javascript - 如何在 Phonegap/Cordova(iOS 和 Android)的谷歌地图中获得后退按钮

javascript - React 组件的 props 是如何异步更新的?

jquery - 通过点击导航来切换隐藏的div?

javascript - 使用 jQuery 确定表行用户点击 - 当表通过 javaScript 动态加载时 -?

c# - 如 Smartr 中所示提取社交资料信息

javascript - 为什么我不能在禁用文档后重新启用文档中的元素?

javascript - 嵌套div问题的jquery mouseout

html - 使用有效和无效通知和符号进行表单验证