jquery - 标题以绝对开头并在滚动通过下一部分后固定

标签 jquery html css header css-transitions

基本上,我希望标题绝对定位,这样当您开始向下滚动时,它会保持在原位并且在我通过下一部分之前不可见。那时,我希望它固定并将 Y 转换为 View ,并在滚动回顶部时反转。

我已经解决了 90% 的问题,尽管我只能在向下滚动时将转换转换为过渡。向上滚动时,过渡中断。我已经尝试根据滚动位置的位置向它抛出各种不同的类,但没有任何效果。我知道有两个菜单可以解决我的问题,但我从未考虑过。

这是我现在如何拥有它的视频,向上滚动时您会看到它没有过渡: https://vid.me/wUwx

最佳答案

试试这个,希望这有帮助

$(window).scroll(function () {
var windowsize = $window.height();
if (windowsize >= 400) { // Some Number of height
$('.header').css('position','fixed');
}
else {
$('.header').css('position','relative');
}
});

标题类应该有 100% 的宽度

关于jquery - 标题以绝对开头并在滚动通过下一部分后固定,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28737915/

相关文章:

javascript - 根据同一天另一个时钟选择器的选择值设置 Bootstrap 时钟选择器的最短时间

html - 背景大小封面加上背景附件固定在 IE11 中滚动的页面中不起作用

php - 如何通过 jquery ajax 发送多行文本

javascript - Safari 在页面加载的第一个 "focus"事件上抖动/跳跃(错误?)

html - 重新排列 Bootstrap 列

javascript - 当页面到达滚动中的某个点时加载宽度转换?

html - 设计具有 3D 效果的 table

html - 表格的文本在有两行或多行文本时居中,但在有一行时不居中?

javascript - 如何通过 javascript 设置复选框、单选按钮、下拉列表的样式?

具有摇动效果的 JavaScript 表单验证