问题描述
我正在使用 jQuery 来实现滚动效果(单击导航栏项目以滚动到页面的一部分)。
$(document).ready(function(){
$(".js-scroll-trigger").on('click',function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html,body').animate({
scrollTop: $(hash).offset().top
},500,function(){
window.location.hash = hash;
});
} // End if
});
});
在台式机上运行良好,但我遇到了一个让我望而却步的错误。在移动设备中,折叠的导航栏也会使用滚动效果,但是单击某些导航栏元素(后者)时会将用户带到该部分,但也会导致实际折叠的导航栏也滚动,基本上隐藏了导航栏折叠顶部的按钮...
我也在使用 Bootstrap 5、Headroom.js 和 Neumorphism UI 库。
编辑:更多示例。这是导航栏中的一些 HTML:
<header class="header-global">
<nav id="navbar-main" aria-label="Primary navigation" class="navbar navbar-main navbar-expand-lg navbar-theme-primary headroom navbar-light navbar-transparent navbar-theme-primary fixed-top">
<div class="container position-relative">
<a class="navbar-brand py-4 px-4 mr-lg-4" href="./index.PHP">
</a>
<div class="navbar-collapse collapse" id="navbar_global">
<div class="navbar-collapse-header">
<div class="row">
<div class="col-6 collapse-brand">
<a href="./index.PHP" class="navbar-brand shadow-soft py-2 px-3 rounded border border-light">
</a>
</div>
<div class="col-6 collapse-close">
<a href="#navbar_global" class="fas fa-times" data-toggle="collapse" data-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" title="close" aria-label="Toggle navigation"></a>
</div>
</div>
</div>
<div class="nav-wrapper position-relative">
<ul class="nav nav-pills rounded nav-fill flex-column flex-md-row">
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0 active js-scroll-trigger" data-toggle="tab" data-toggle="scroll" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0 js-scroll-trigger" data-toggle="tab" data-toggle="scroll" href="#about">About us</a>
</li>
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0 js-scroll-trigger" data-toggle="tab" data-toggle="scroll" href="#work">Our work</a>
</li>
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0 js-scroll-trigger" data-toggle="tab" href="#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0 js-scroll-trigger" data-toggle="tab" href="#contact">Contact us</a>
</li>
</ul>
</div>
</div>
<div class="d-flex align-items-center">
<button class="navbar-toggler ml-2" type="button" data-toggle="collapse" data-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</nav>
</header>
这是一些 neumorphism.js 代码:
"use strict";
$(document).ready(function () {
// options
var breakpoints = {
sm: 540,md: 720,lg: 960,xl: 1140
};
var $navbarCollapse = $('.navbar-main .collapse');
// Collapse navigation
$navbarCollapse.on('hide.bs.collapse',function () {
var $this = $(this);
$this.addClass('collapsing-out');
$('html,body').css('overflow','initial');
});
$navbarCollapse.on('hidden.bs.collapse',function () {
var $this = $(this);
$this.removeClass('collapsing-out');
});
$navbarCollapse.on('shown.bs.collapse',function () {
$('html,'hidden');
});
$('.navbar-main .dropdown').on('hide.bs.dropdown',function () {
var $this = $(this).find('.dropdown-menu');
$this.addClass('close');
setTimeout(function () {
$this.removeClass('close');
},200);
});
$(document).on('click','.mega-dropdown',function (e) {
e.stopPropagation();
});
$(document).on('click','.navbar-nav > .dropdown',function (e) {
e.stopPropagation();
});
$('.dropdown-submenu > .dropdown-toggle').click(function (e) {
e.preventDefault();
$(this).parent('.dropdown-submenu').toggleClass('show');
});
// Headroom - show/hide navbar on scroll
if ($('.headroom')[0]) {
var headroom = new Headroom(document.querySelector("#navbar-main"),{
offset: 0,tolerance: {
up: 0,down: 0
},});
headroom.init();
}
更新 - 解决了! 对于可能面临此问题的其他任何人,对我有用的事情是调整 neumorphism.js 中的溢出 - 从“隐藏”和“初始”,我将其设置为“滚动”。 此外,如果您希望在移动设备中单击链接后关闭导航栏,请添加以下内容(在 stackoverflow --> How to hide collapsible Bootstrap navbar on click 上找到):
// collapse navbar on mobile after link is clicked
$('.nav-link').on('click',function() {
$('.navbar-collapse').collapse('hide');
});
$navbarCollapse.on('hide.bs.collapse','scroll');
});
$navbarCollapse.on('hidden.bs.collapse','scroll');
});
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)