javascript - 如何创建一个固定在屏幕底部但当用户向下滚动时它不再是固定页脚的页脚?

标签 javascript jquery css scroll

这就是我想要做的:

我想创建一个无论屏幕大小如何都贴在用户屏幕底部的页脚。但是当用户滚动时,我希望能够在用户向下滚动时将标题从固定更改为作为页面的一部分向下移动。我是 JS 的新手,但我尝试了一些这样的事情:

 $(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function (e) {

                var theEvent = e.originalEvent.wheelDelta || e.originalEvent.detail * -1;
                if (theEvent / 120 > 0) {
                    if ($(window).scrollTop() == 0) {
                        $("#content_under_fixed_footer").hide();
                    }
                }
                else {
                    if ($(window).scrollTop() < $(document).height() - $(window).height()) {
                        $("#content_under_fixed_footer").fadeIn(2000);
                        $(".fixed_header").css("position", "relative");
                    }
                }
            });

如果我使用上面的脚本,触发器是不对的。如果用户有一个大屏幕,则没有滚动,但如果窗口缩短,则效果相对较好。请帮助我今天需要提交这个,我会尝试任何解决方案。谢谢!

最佳答案

看看这个:

<html><head><title>Test</title> 
<script type="text/javascript">
alert(screen.width + "x" + screen.height);
</script>
</head><body>
</body>
</html>

这样您就可以直接使用 screen.width 和 screen.height,并据此计算所有内容。

关于javascript - 如何创建一个固定在屏幕底部但当用户向下滚动时它不再是固定页脚的页脚?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17572902/

相关文章:

html - 最佳方法,构建复杂的 HTML 表格

javascript - If 和 Else 语句始终输出 If

javascript - 在加载完整页面之前使用 JavaScript 获取浏览器记住的滚动位置

javascript - 如何将组件添加到 React 中的另一个组件?

jquery - 如何在 jQuery 对话框中验证 ViewModel?

javascript - 使用 jQuery 和 JSON 数组创建 HTML 表

JavaScript 颜色随机化器不起作用

父背景隐藏了 z-index <0 的 HTML 背景?

javascript - VueJs 在 v-select 中使用计算变量的无限循环

javascript - 将样式应用于 iframe 中的内容