根据Bootstrap 3文档,我已将以下属性添加到导航栏:
<nav class="navbar no-margin-bottom" data-spy="affix" data-offset-top="90" >
...
</nav>
在向下滚动页面后,Bootstrap 4没有将'affix'类添加到导航栏中。有人能告诉我如何解决这个问题吗?Bootstrap.js和jQuery.js是可以工作的。
根据Bootstrap 3文档,我已将以下属性添加到导航栏:
<nav class="navbar no-margin-bottom" data-spy="affix" data-offset-top="90" >
...
</nav>
在向下滚动页面后,Bootstrap 4没有将'affix'类添加到导航栏中。有人能告诉我如何解决这个问题吗?Bootstrap.js和jQuery.js是可以工作的。
$(window).on('scroll', function(event) {
var scrollValue = $(window).scrollTop();
if (scrollValue == settings.scrollTopPx || scrollValue > 70) {
$('.navbar').addClass('fixed-top');
}
});
$('.navbar').addClass('navbar');
应该改为 $('.navbar').addClass('fixed-top');
?否则我看不出添加一个已经存在的类会有什么影响。请注意,不要改变原意。 - Tieson T.更新Bootstrap 4
文档建议使用sticky polyfill,并且推荐的ScrollPos-Styler不能真正帮助滚动位置(您可以轻松定义偏移量)。
我认为最好使用jQuery来监视窗口滚动并相应地更改CSS,以便将其固定在页面上。
var toggleAffix = function(affixElement, wrapper, scrollElement) {
var height = affixElement.outerHeight(),
top = wrapper.offset().top;
if (scrollElement.scrollTop() >= top){
wrapper.height(height);
affixElement.addClass("affix");
}
else {
affixElement.removeClass("affix");
wrapper.height('auto');
}
};
$('[data-toggle="affix"]').each(function() {
var ele = $(this),
wrapper = $('<div></div>');
ele.before(wrapper);
$(window).on('scroll resize', function() {
toggleAffix(ele, wrapper, $(this));
});
// init
toggleAffix(ele, wrapper, $(window));
});
编辑:另一种解决方案是在Bootstrap 4中使用3.x版本Affix插件的这个替代品。
http://www.codeply.com/go/HmY7DLHLkI
移除了 Affix jQuery插件。我们建议使用一个
position: sticky
的polyfill替代。 请参阅HTML5 Please条目中的详细信息和特定的polyfill推荐。如果您使用Affix应用其他非
position
样式,那么这些polyfills可能不支持您的用例。 这种情况下可选择第三方ScrollPos-Styler库。
在Anwar Hussain的回答基础上,我找到了成功的方法:
$(window).on('scroll', function (event) {
var scrollValue = $(window).scrollTop();
if (scrollValue > 120) {
$('.navbar').addClass('affix');
} else{
$('.navbar').removeClass('affix');
}
});
下滑页面时,这将为导航栏应用类别,但在向上滑动页面时会将该类别移除。以前,在向上滑动页面时,应用的类别将保留在导航栏中。
.js ScrollPos-Styler
(scrollPosStyler.js
)文件包含到您的页面中。<div>
元素。<nav class="navbar navbar-toggleable-md">
sps sps--abv
类。<nav class="navbar navbar-toggleable-md sps sps--abv">
.css
样式(参见演示页面)。/**
* 'Shared Styles'
**/
.sps {
}
/**
* 'Sticky Above'
*
* Styles you wish to apply
* Once stick has not yet been applied
**/
.sps--abv {
padding: 10px
}
/**
* 'Sticky Below'
*
* Styles you wish to apply
* Once stick has been applied
**/
.sps--blw {
padding: 2px
}
$(window).on('scroll', function (event) {
var scrollValue = $(window).scrollTop();
var offset = $('[data-spy="affix"]').attr('data-offset-top');
if (scrollValue > offset) {
$('[data-spy="affix"]').addClass('affix-top');
var width = $('[data-spy="affix"]').parent().width();
$('.affix-top').css('width', width);
} else{
$('[data-spy="affix"]').removeClass('affix-top');
}
});
对于想要使用纯Javascript寻找答案的用户,以下是如何通过纯Javascript实现:
window.onscroll = (e) => {
let scrollValue = window.scrollY;
if (scrollValue > 120) {
document.querySelector('.navbar').classList.add('affix');
} else{
document.querySelector('.navbar').classList.remove('affix');
}
}
data-spy="affix" data-offset-top="90"
属性,只需添加'sticky-top'即可。
在尝试了我能找到的每种解决方案之后(并意识到affix已从bootstrap 4中删除),我能够获得所需的粘性结果的唯一方法是使用sticky-kit。
这是一个非常简单的jQuery插件,很容易设置。
只需将代码包含在您的项目中,然后指定要粘住的元素即可。
$("#sidebar").stick_in_parent();
在Bootstrap 4中简单使用fixed-top类,并使用addClass和removeClass方法。
$(window).on('scroll', function(event) {
var scrollValue = $(window).scrollTop();
if ( scrollValue > 70) {
$('.navbar-sticky').addClass('fixed-top');
}else{
$('.navbar-sticky').removeClass('fixed-top');
}
});