Bootstrap Scrollspy 导致 Off-Canavas 菜单出现问题
Bootstrap Scrollspy causes issues with Off-Canavas Menu
UPDATE: To clear up some confusion I added a fiddle that demonstrates how it is supposed to work, but it is just missing the
scrollspy: https://jsfiddle.net/kmdLg7t0/ How can I add the scrollspyto this fiddle so that the menu highlights when I'm on a specific section?
我创建了一个固定的左侧菜单,它变成了一个关闭-canvas 菜单
<992px 平板电脑和手机的浏览器宽度。当我 select 锚点 link 在浏览器宽度 >992px 上时,它会关闭菜单并导航到锚点 link 部分。
自定义JQuery代码:
这是我的自定义 jQuery 代码,当我单击锚 link:
时,它会关闭 Off-Canvas 菜单
// close off-canvas menu and navigate to anchor
$('.navmenu-nav li a').on('click', function() {
$('body').removeClass('bs.offcanvas');
});
问题:
我决定添加一个 bootstrap offscrollspy 它在浏览器宽度大于 992px 后按预期工作,但是当我将浏览器宽度调整为小于992px 这会干扰自定义 Jquery 代码以关闭菜单并导航到锚点 link。
这是Fiddle:
Bootstrap ScrollSpy causes issue with Off Canvas Menu and JQuery Code
My GUESS: I'm guessing the solution to this problem is to use jquery or
javascript to prevent or remove the data-target=".navmenu" from
activating when my screen is less than the <992px. Or we can find
a way to only activate the scrollspy after >992px. I'm
currently trying to figure this out, but I need someone who is a true
expert in jquery to solve this dilemma.
先决条件:
- Bootstrap.min.css
- Bootstrap.min.js
- 贾斯尼-bootstrap.css
- 贾斯尼-bootstrap.js
JS:
$(document).ready(function () {
toggleOffcanvas($(window).width() <= 992);
});
// simulate modal opening
$('.nav-link').click(function() {
if ($(window).width() > 992) {
$('.backdrop').hide(0, false);
}
$('#navToggle').click();
});
$('.navmenu').on('show.bs.offcanvas', function() {
if ($(window).width() <= 992) {
$('.backdrop').fadeIn();
}
});
$('.navmenu').on('hide.bs.offcanvas', function() {
if ($(window).width() <= 992) {
$('.backdrop').fadeOut();
}
});
// close modal on resize
$(window).resize(function() {
if ($(window).width() > 992) {
$('.backdrop').hide(0, false);
$('body').removeClass('bs.offcanvas');
}
toggleOffcanvas($(window).width() <= 992);
});
// switch active navigation link onclick
$('.nav a').on('click', function() {
$('.nav').find('.active').removeClass('active');
$(this).parent().addClass('active');
});
// close modal when navigating to anchor
$('.navmenu-nav li a').on('click', function() {
$('body').removeClass('bs.offcanvas');
});
function toggleOffcanvas(condition) {
if (!! condition) {
$('.nav-link').attr('data-toggle', 'offcanvas');
} else {
$('.nav-link').removeAttr('data-toggle');
}
}
html:
<body data-spy="scroll" data-target="#myScrollspy" data-offset="50">
<div class="backdrop"></div>
<div id="myScrollspy" class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm colornav ">
<a href="#" class="close" data-toggle="offcanvas" data-target=".navmenu">×</a>
<a id="navToggle" class=""><span></span></a>
<h4 class="navmenu-brand visible-md visible-lg visible-sm visible-xs" href="#">2017</h4>
<ul class="nav navmenu-nav">
<li class="active"><a class="nav-link" data-toggle="offcanvas" data-target=".navmenu" href="#january">Enero</a></li>
<li><a class="nav-link" data-toggle="offcanvas" data-target=".navmenu" href="#february">Msrs</a></li>
<li><a class="nav-link" href="http://www.jasny.net/bootstrap/examples/navmenu-reveal/">Jupiter</a></li>
<li><a class="nav-link" href="http://www.jasny.net/bootstrap/examples/navbar-offcanvas/">Off canvas navbar</a></li>
</ul>
</div>
<div class="navbar navbar-default navbar-fixed-top navbar-preheader">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">navbar brand</a>
</div>
<div class="container">
<div class="page-header">
<h1>Navmenu Template</h1>
</div>
<p class="lead">This example shows the navmenu element. If the viewport is <b>less than 992px</b> the menu will be placed the off canvas and will be shown with a slide in effect.</p>
<p>Also take a look at the examples for a navmenu with <a href="http://www.jasny.net/bootstrap/examples/navmenu-push">push effect</a> and <a href="http://www.jasny.net/bootstrap/examples/navmenu-reveal">reveal effect</a>.</p>
<p class="space"></p>
<p id="january">January</p>
<p id="february">February</p>
</div><!-- /.container -->
</body>
CSS:
html, body {
height: 100%;
}
body {
padding: 50px 0 0 0;
}
.space {padding-bottom:900px;}
.backdrop {
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
bottom: 0;
width: 100vw;
height: 100vh;
z-index: 1040;
display: none;
}
.navbar-fixed-top {
background:#fff!important;
}
.navbar {
display: block;
text-align: center;
}
.navbar-brand {
display: inline-block;
float: none;
}
.navbar-toggle {
position: absolute;
float: left;
margin-left: 15px;
}
.container {
max-width: 100%;
}
@media (min-width: 1px) {
.navbar-toggle {
display: block !important; background:none!important; border:none !important; color:#f90 !important;
}
}
@media (min-width: 992px) {
body {
padding: 30px 0 0 300px;
}
.navmenu {
padding-top: 0;
}
.navbar-toggle {display:none!important;}
.close {display:none}
.navmenu-fixed-left {
z-index:0;
top: 48px;
bottom: 0; background:#fff!important;
}
}
.navbar-default .navbar-toggle .icon-bar{
background-color:#333;
}
.close {margin-right:10px; margin-top:10px;}
@media (max-width:991px) {
.navmenu-fixed-left {
z-index:1050;
top: 0;
bottom: 0; background:#fff!important;
}
}
.backdrop {display:none}
#january, #february {
text-transform: uppercase;
background-color: red;
text-align: center;
line-height: 90vh;
font-size: 5em;
height: 90vh;
color: white;
}
#february {
background-color: green;
}
通过将 scroll spy 绑定到 class,然后您可以根据需要切换所述 class。此外,请确保 运行 该函数在页面加载时设置一次初始状态。
$('body').scrollspy({ target: '.scroll-spy' });
toggleScrollSpy($(window).width() <= 992);
// close modal on resize
$(window).resize(function() {
if ($(window).width() > 992) {
$('.backdrop').hide(0, false);
$('body').removeClass('bs.offcanvas');
}
toggleScrollSpy($(window).width() <= 992);
});
function toggleScrollSpy(condition) {
if (!!condition) {
$('#myScrollspy').addClass('scroll-spy');
} else {
$('#myScrollspy').removeClass('scroll-spy');
}
}
我只想说,当您制作网页动画或调整网页大小时,请确保您的坐标顶部、左侧和高度、宽度都经过仔细计算。因为如果它们在调整大小时有任何变化,它将显示不需要的位置。因此,检查坐标然后根据需要动态更改它们总是一个好主意。
代码的问题是菜单项上的 data-target=".navmenu"
破坏了 scrollspy 插件。基本上,scrollspy 通过 data-target
属性 或 href
属性 在菜单项和页面上的元素之间建立连接。这是它的一部分 source code:
return `${selector}[data-target="${target}"],` +
`${selector}[href="${target}"]`
因此,您不能在菜单 link 上使用 data-target
来关闭菜单。您可以使用 javascript 来关闭菜单。
这里更新了 link 的 HTML:
<li class="active"><a class="nav-link" href="#january">Enero</a></li>
<li><a class="nav-link" href="#february">Msrs</a></li>
以及您需要的所有 javascript:
$(document).ready(function () {
// Add the backdrop when menu is shown
$('.navmenu').on('show.bs.offcanvas', function() {
$('.backdrop').fadeIn();
});
// Remove the backdrop when menu is hidden
$('.navmenu').on('hide.bs.offcanvas', function() {
$('.backdrop').fadeOut();
});
// Hide the menu on menu item click
$('.nav-link').click(function() {
if ($(window).width() <= 992) {
$('.navmenu').offcanvas('toggle');
}
});
// Remove the backdrop if window is resized over the breakpoint
$(window).resize(function () {
if ($(window).width() > 992) {
$('.backdrop').fadeOut();
}
});
});
一个完整的工作示例:
https://jsfiddle.net/kmdLg7t0/5/
最后,您必须从 link 元素中删除不需要的所有 href="#"
。例如关闭菜单按钮将带你回到 #
,即使你已经导航到 #january
.
所以我总共做了:
- 从 links
中删除了 data-
个属性
- 在 link 上点击 javascript 关闭菜单
- 从 links
中删除了不必要的 href=#
其他一切都由插件自己处理。
UPDATE: To clear up some confusion I added a fiddle that demonstrates how it is supposed to work, but it is just missing the scrollspy: https://jsfiddle.net/kmdLg7t0/ How can I add the scrollspyto this fiddle so that the menu highlights when I'm on a specific section?
我创建了一个固定的左侧菜单,它变成了一个关闭-canvas 菜单 <992px 平板电脑和手机的浏览器宽度。当我 select 锚点 link 在浏览器宽度 >992px 上时,它会关闭菜单并导航到锚点 link 部分。
自定义JQuery代码: 这是我的自定义 jQuery 代码,当我单击锚 link:
时,它会关闭 Off-Canvas 菜单// close off-canvas menu and navigate to anchor
$('.navmenu-nav li a').on('click', function() {
$('body').removeClass('bs.offcanvas');
});
问题:
我决定添加一个 bootstrap offscrollspy 它在浏览器宽度大于 992px 后按预期工作,但是当我将浏览器宽度调整为小于992px 这会干扰自定义 Jquery 代码以关闭菜单并导航到锚点 link。
这是Fiddle:
Bootstrap ScrollSpy causes issue with Off Canvas Menu and JQuery Code
My GUESS: I'm guessing the solution to this problem is to use jquery or javascript to prevent or remove the data-target=".navmenu" from activating when my screen is less than the <992px. Or we can find a way to only activate the scrollspy after >992px. I'm currently trying to figure this out, but I need someone who is a true expert in jquery to solve this dilemma.
先决条件:
- Bootstrap.min.css
- Bootstrap.min.js
- 贾斯尼-bootstrap.css
- 贾斯尼-bootstrap.js
JS:
$(document).ready(function () {
toggleOffcanvas($(window).width() <= 992);
});
// simulate modal opening
$('.nav-link').click(function() {
if ($(window).width() > 992) {
$('.backdrop').hide(0, false);
}
$('#navToggle').click();
});
$('.navmenu').on('show.bs.offcanvas', function() {
if ($(window).width() <= 992) {
$('.backdrop').fadeIn();
}
});
$('.navmenu').on('hide.bs.offcanvas', function() {
if ($(window).width() <= 992) {
$('.backdrop').fadeOut();
}
});
// close modal on resize
$(window).resize(function() {
if ($(window).width() > 992) {
$('.backdrop').hide(0, false);
$('body').removeClass('bs.offcanvas');
}
toggleOffcanvas($(window).width() <= 992);
});
// switch active navigation link onclick
$('.nav a').on('click', function() {
$('.nav').find('.active').removeClass('active');
$(this).parent().addClass('active');
});
// close modal when navigating to anchor
$('.navmenu-nav li a').on('click', function() {
$('body').removeClass('bs.offcanvas');
});
function toggleOffcanvas(condition) {
if (!! condition) {
$('.nav-link').attr('data-toggle', 'offcanvas');
} else {
$('.nav-link').removeAttr('data-toggle');
}
}
html:
<body data-spy="scroll" data-target="#myScrollspy" data-offset="50">
<div class="backdrop"></div>
<div id="myScrollspy" class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm colornav ">
<a href="#" class="close" data-toggle="offcanvas" data-target=".navmenu">×</a>
<a id="navToggle" class=""><span></span></a>
<h4 class="navmenu-brand visible-md visible-lg visible-sm visible-xs" href="#">2017</h4>
<ul class="nav navmenu-nav">
<li class="active"><a class="nav-link" data-toggle="offcanvas" data-target=".navmenu" href="#january">Enero</a></li>
<li><a class="nav-link" data-toggle="offcanvas" data-target=".navmenu" href="#february">Msrs</a></li>
<li><a class="nav-link" href="http://www.jasny.net/bootstrap/examples/navmenu-reveal/">Jupiter</a></li>
<li><a class="nav-link" href="http://www.jasny.net/bootstrap/examples/navbar-offcanvas/">Off canvas navbar</a></li>
</ul>
</div>
<div class="navbar navbar-default navbar-fixed-top navbar-preheader">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">navbar brand</a>
</div>
<div class="container">
<div class="page-header">
<h1>Navmenu Template</h1>
</div>
<p class="lead">This example shows the navmenu element. If the viewport is <b>less than 992px</b> the menu will be placed the off canvas and will be shown with a slide in effect.</p>
<p>Also take a look at the examples for a navmenu with <a href="http://www.jasny.net/bootstrap/examples/navmenu-push">push effect</a> and <a href="http://www.jasny.net/bootstrap/examples/navmenu-reveal">reveal effect</a>.</p>
<p class="space"></p>
<p id="january">January</p>
<p id="february">February</p>
</div><!-- /.container -->
</body>
CSS:
html, body {
height: 100%;
}
body {
padding: 50px 0 0 0;
}
.space {padding-bottom:900px;}
.backdrop {
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
bottom: 0;
width: 100vw;
height: 100vh;
z-index: 1040;
display: none;
}
.navbar-fixed-top {
background:#fff!important;
}
.navbar {
display: block;
text-align: center;
}
.navbar-brand {
display: inline-block;
float: none;
}
.navbar-toggle {
position: absolute;
float: left;
margin-left: 15px;
}
.container {
max-width: 100%;
}
@media (min-width: 1px) {
.navbar-toggle {
display: block !important; background:none!important; border:none !important; color:#f90 !important;
}
}
@media (min-width: 992px) {
body {
padding: 30px 0 0 300px;
}
.navmenu {
padding-top: 0;
}
.navbar-toggle {display:none!important;}
.close {display:none}
.navmenu-fixed-left {
z-index:0;
top: 48px;
bottom: 0; background:#fff!important;
}
}
.navbar-default .navbar-toggle .icon-bar{
background-color:#333;
}
.close {margin-right:10px; margin-top:10px;}
@media (max-width:991px) {
.navmenu-fixed-left {
z-index:1050;
top: 0;
bottom: 0; background:#fff!important;
}
}
.backdrop {display:none}
#january, #february {
text-transform: uppercase;
background-color: red;
text-align: center;
line-height: 90vh;
font-size: 5em;
height: 90vh;
color: white;
}
#february {
background-color: green;
}
通过将 scroll spy 绑定到 class,然后您可以根据需要切换所述 class。此外,请确保 运行 该函数在页面加载时设置一次初始状态。
$('body').scrollspy({ target: '.scroll-spy' });
toggleScrollSpy($(window).width() <= 992);
// close modal on resize
$(window).resize(function() {
if ($(window).width() > 992) {
$('.backdrop').hide(0, false);
$('body').removeClass('bs.offcanvas');
}
toggleScrollSpy($(window).width() <= 992);
});
function toggleScrollSpy(condition) {
if (!!condition) {
$('#myScrollspy').addClass('scroll-spy');
} else {
$('#myScrollspy').removeClass('scroll-spy');
}
}
我只想说,当您制作网页动画或调整网页大小时,请确保您的坐标顶部、左侧和高度、宽度都经过仔细计算。因为如果它们在调整大小时有任何变化,它将显示不需要的位置。因此,检查坐标然后根据需要动态更改它们总是一个好主意。
代码的问题是菜单项上的 data-target=".navmenu"
破坏了 scrollspy 插件。基本上,scrollspy 通过 data-target
属性 或 href
属性 在菜单项和页面上的元素之间建立连接。这是它的一部分 source code:
return `${selector}[data-target="${target}"],` +
`${selector}[href="${target}"]`
因此,您不能在菜单 link 上使用 data-target
来关闭菜单。您可以使用 javascript 来关闭菜单。
这里更新了 link 的 HTML:
<li class="active"><a class="nav-link" href="#january">Enero</a></li>
<li><a class="nav-link" href="#february">Msrs</a></li>
以及您需要的所有 javascript:
$(document).ready(function () {
// Add the backdrop when menu is shown
$('.navmenu').on('show.bs.offcanvas', function() {
$('.backdrop').fadeIn();
});
// Remove the backdrop when menu is hidden
$('.navmenu').on('hide.bs.offcanvas', function() {
$('.backdrop').fadeOut();
});
// Hide the menu on menu item click
$('.nav-link').click(function() {
if ($(window).width() <= 992) {
$('.navmenu').offcanvas('toggle');
}
});
// Remove the backdrop if window is resized over the breakpoint
$(window).resize(function () {
if ($(window).width() > 992) {
$('.backdrop').fadeOut();
}
});
});
一个完整的工作示例:
https://jsfiddle.net/kmdLg7t0/5/
最后,您必须从 link 元素中删除不需要的所有 href="#"
。例如关闭菜单按钮将带你回到 #
,即使你已经导航到 #january
.
所以我总共做了:
- 从 links 中删除了
- 在 link 上点击 javascript 关闭菜单
- 从 links 中删除了不必要的
data-
个属性
href=#
其他一切都由插件自己处理。