我已经实现了一个自动 float 的subnav栏,该栏直接从Bootstrap docs CSS and JS中获取,并且正在我正在处理的站点中。它仅出现在一个 View 上,但这是一个Rails View ,因此它是根据加载的对象动态生成的。
我发现的是,当出现在subnav栏下方的内容足够长时,subnav栏的行为将按预期方式工作-当subnav栏滚动到 View 之外时,将立即添加subnav固定的类。
但是,如果页面短于此,则subnav栏将在它实际消失之前被固定,这会产生很大的震撼跳动,更不用说您可以看到该栏过去的空间,这是您不应该看到的能够看到。
我应该补充一点,我使用的是固定的(主)导航栏,并考虑了适当的正文填充。
看来问题出在返回的$('.subnav').offset.top
值。
能够使用jQuery/JS更好的人可以帮助诊断这一点,并提出一种方法来使subnav条仅在其滚动到视线之外时才变得固定吗?
Javascript:
var $win = $(window)
, $nav = $('.subnav')
, navTop = $('.subnav').length && $('.subnav').offset().top
, isFixed = 0
, $hiddenName = $('.subnav .hide')
processScroll()
$nav.on('click', function () {
if (!isFixed) setTimeout(function () { $win.scrollTop($win.scrollTop() - 47) }, 10)
})
$win.on('scroll', processScroll)
function processScroll() {
var i, scrollTop = $win.scrollTop()
if (scrollTop >= navTop && !isFixed) {
isFixed = 1
$nav.addClass('subnav-fixed')
$hiddenName.removeClass('hide')
if (!$('.subnav li').hasClass('active')) {
$('.subnav li:eq(1)').addClass('active')
}
} else if (scrollTop <= navTop && isFixed) {
isFixed = 0
$nav.removeClass('subnav-fixed')
$hiddenName.addClass('hide')
$('.subnav li').removeClass('active')
}
}
Replicating Bootstraps main nav and subnav-我已经看到了这个问题,但我认为它仍然可以使用
.offset()
来避免问题的发生更新:
仍然没有运气。随着页面长度的缩短,
navTop
似乎还会变短,这是没有意义的,因为它使用的是offset().top
。关于该方法的工作方式,我是否有所了解?更新2
Bootstrap 2.1.0似乎可以解决此问题,因为它实际上包括一个subnav栏作为一个真正的组件,以及一个用于处理粘性行为的jQuery插件。尽管如此,我还是想了解一下为什么offset()函数如此不可靠。
最佳答案
我还采用了相同的JS代码,并将其改编到我的网站上(仍在 build 中)。这是一些代码(有效)
的HTML
<div class="fix_on_top">
<div class="container">
<ul class="breadcrumb">
<li><a href="#">Home</a> <span class="divider">/</span></li>
<li><a href="#">Packages</a> <span class="divider">/</span></li>
<li class="active">Professional courses - I am a breadcrumb; I'll fix myself below the top navbar when you scroll the page</li>
</ul>
</div>
</div>
少(CSS)
.fixed_on_top {
left: 0;
right: 0;
z-index: 1020;
position: fixed;
top:$navbarHeight;
}
的JavaScript
var $window = $(window),
$fix_on_top = $('.fix_on_top'),
fixed_Top = $('.fix_on_top').length && $('.fix_on_top').offset().top - 40,
isFixed = 0;
process_scroll();
// hack sad times - holdover until rewrite for 2.1
$fix_on_top.on('click', function () {
if (!isFixed) setTimeout(function () {
$window.scrollTop($window.scrollTop() - 47)
}, 10);
});
$window.on('scroll', process_scroll);
function process_scroll()
{
var i, scrollTop = $window.scrollTop();
if (scrollTop >= fixed_Top && !isFixed) {
isFixed = 1;
$fix_on_top.addClass('fixed_on_top');
}
else if (scrollTop <= fixed_Top && isFixed)
{
isFixed = 0;
$fix_on_top.removeClass('fixed_on_top');
}
}
我还修改了适用于THEAD的原始代码(用于另一个网站)(表格-每个网页我都有一个表格,ID =“tablesortable”)
// Automatically add the class "fix_on_scroll" on #tablesortable's thead
if ($('#tablesortable thead').length)
{
var thead_cells = new Array();
$('#tablesortable thead').addClass('fix_on_scroll');
// Get the width of each cells in thead
$('#tablesortable thead').find('td, th').each(function(i, v) {
thead_cells.push($(this).width());
});
// Keep same with in tbody and tfoot
$('#tablesortable tbody tr:first').children('td, th').each(function(i, v) {
$(this).width(thead_cells[i]);
});
$('#tablesortable tfoot tr:first').children('td, th').each(function(i, v) {
$(this).width(thead_cells[i]);
});
}
// Fix all elements (with class .fix_on_scroll) just below the top menu on scroll
// (Modified version from homepage of Twitter's Bootstrap - js/application.js)
var $window = $(window),
$fix_on_scroll = $('.fix_on_scroll'),
fixed_elem_top = $('.fix_on_scroll').length && $('.fix_on_scroll').offset().top - 26,
isFixed = 0;
process_scroll();
// hack sad times - holdover until rewrite for 2.1
$fix_on_scroll.on('click', function () {
if (!isFixed) setTimeout(function () {$window.scrollTop($window.scrollTop() - 40)}, 10)
});
$window.on('scroll', process_scroll);
function process_scroll()
{
var i, scrollTop = $window.scrollTop();
if (scrollTop >= fixed_elem_top && !isFixed)
{
isFixed = 1;
$fix_on_scroll.addClass('fixed_on_scroll');
// Keep original width of td/th
if ($fix_on_scroll.is('thead'))
{
$fix_on_scroll.find('td, th').each(function(i, v) {
$(this).width(thead_cells[i]);
});
}
}
else if (scrollTop <= fixed_elem_top && isFixed)
{
isFixed = 0
$fix_on_scroll.removeClass('fixed_on_scroll')
}
}
我的(自适应)代码正在运行。您可以使用它们。