HTML -- How can I quot;stickquot; my navbar after reaching a specific section on page?(HTML——我怎样才能“坚持?到达页面上的特定部分后我的导航栏?)
问题描述
我想了两种不同的方法来解决这个问题,但我需要帮助.
I thought of 2 different methods to approaching this, but I need assistance.
- 滚动到部分,然后粘住.
- 在滚动时隐藏元素,然后在到达页面点后取消隐藏元素.
我该怎么做?
我目前正在使用 stickyjs.
但我没有看到执行我所要求的功能.
But I don't see a feature for doing what I asked.
推荐答案
demo - http://jsfiddle.net/m6q6j8xL/3/
这是自定义js
在这个演示中,标题变为绿色(fixed
),当你到达蓝色时,div
变回normal
,当你是从蓝色 div 出来,它变回 fixed
in this demo the header changes to green(fixed
) and when you reach to blue div
changes back to normal
and when u are out from the blue div it changes back to fixed
将填充添加到 div 以便在更改为固定时不会影响窗口滚动
padding is added to div so that it doesn't effect window scroll when changed to fixed
var stickyNavTop = $('.header').offset().top;
function scrolling() {
doc = $(document).height()
hidingtop = $('.hiding').offset().top;
hidingbottom = $('.hiding').position().top + $('.hiding').outerHeight(true) // finding the outer height
if ($(window).scrollTop() > hidingtop && $(window).scrollTop() < hidingbottom) {
$('.header').removeClass('sticky');
$('.container').css('padding-top', '0');
}
}
var stickyNav = function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.header').addClass('sticky');
$('.container').css('padding-top', '100px');
} else {
$('.header').removeClass('sticky');
$('.container').css('padding-top', '0');
}
};
stickyNav();
$(window).scroll(function () {
stickyNav();
scrolling()
});
这篇关于HTML——我怎样才能“坚持"?到达页面上的特定部分后我的导航栏?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:HTML——我怎样才能“坚持"?到达页面上的特定
基础教程推荐
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 我什么时候应该在导入时使用方括号 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 在for循环中使用setTimeout 2022-01-01
- 响应更改 div 大小保持纵横比 2022-01-01
- 动态更新多个选择框 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01