【发布时间】：2015-12-15 12:41:54
【问题描述】：
我正在使用以下代码显示一个响应式侧边栏，当用户滚动到顶部和/或单击菜单链接 div 时，该侧边栏在着陆时可见。如果用户展开了侧边栏，一旦用户向上或向下滚动 100 像素，它就会再次折叠。
这在桌面上效果很好，但在移动设备上并不是最好的用户体验。我想禁用在移动设备上自动展开/折叠的脚本部分，即 .active 类。
HTML
<body>
<!-- Menu toggle -->
<a href="#sidebar" id="sidebarToggle" class="menu-link">
<div class="icon"></div>
</a>
<div class="line"></div>
<!-- Invisible line from which to measure position of #sidebar for expand/collapse purposes -->
<div id="sidebar">
<header>
<h4>Sidebar Content</h4>
</header>
</div>
</body>
JS
/* Expand/Collapse sidebar based on position in page */
var relativeY = $("#sidebar").offset().top - $(".line").offset().top;
$(window).scroll(function() {
relativeY = $("#sidebar").offset().top - $(".line").offset().top;
console.log(relativeY);
if (relativeY > 100 || relativeY < -100) {
$("#sidebar").removeClass("active");
$("#sidebarToggle").removeClass("active");
$(".line").css("top", "0")
} else {
$("#sidebar").addClass("active");
$("#sidebarToggle").addClass("active");
}
});
// Add or remove 'active' class upon landing/resize based on viewport size
(function($) {
var $window = $(window),
$sidebar = $('#sidebar');
$sidebarToggle = $('#sidebarToggle');
function resize() {
if ($window.width() <= 768) {
return $sidebar.removeClass('active');
return $sidebarToggle.removeClass('active');
}
$sidebar.addClass('active');
$sidebarToggle.addClass('active');
}
$window
.resize(resize)
.trigger('resize');
})(jQuery);
/* Responsive sidebar */
(function(window, document) {
var sidebar = document.getElementById('sidebar'),
sidebarToggle = document.getElementById('sidebarToggle');
function toggleClass(element, className) {
var classes = element.className.split(/\s+/),
length = classes.length,
i = 0;
for (; i < length; i++) {
if (classes[i] === className) {
classes.splice(i, 1);
break;
}
}
// The className is not found
if (length === classes.length) {
classes.push(className);
}
element.className = classes.join(' ');
}
sidebarToggle.onclick = function(e) {
var topScroll = $(window).scrollTop();
var active = 'active';
$(".line").css("top", topScroll);
e.preventDefault();
toggleClass(sidebar, active);
toggleClass(sidebarToggle, active);
};
}(this, this.document));
CSS
body {
height: 4000px;
}
/* Sidebar */
.line {
/* Invisible line from which to measure position of #sidebar for expand/collapse purposes */
top: 0;
position: absolute;
}
#sidebar {
background: #212e37;
color: #8b8c91;
width: 225px;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
right: 35px;
margin-right: -225px;
/* "#sidebar" width */
z-index: 9998;
-webkit-overflow-scrolling: touch;
box-shadow: none;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
#sidebar.active {
margin-right: 0;
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.35);
}
@media only screen and (min-width: 0px) and (max-width: 414px) {
#sidebar {
overflow-y: scroll;
width: 75%;
margin-right: -75%;
}
}
#sidebar header {
font-weight: bold;
padding: 30px 40px 50px 20px;
border-bottom: 1px solid #8b8c91;
color: #8b8c91;
}
@media only screen and (min-width: 0px) and (max-width: 414px) {
#sidebar header {
padding: 20px;
}
}
/* Toggle menu bar */
.menu-link {
position: fixed;
display: block;
top: 0;
right: 0;
background: #7e775d;
z-index: 9999;
width: 35px;
height: 100%;
padding: 35px 11px;
}
.menu-link:hover {
background: #211d28;
}
更新
问题似乎与以下代码有关，因为当我删除此代码时，移动问题已解决。但是，滚动到页面顶部时，我失去了添加.active 的功能。是否可以编辑以下代码段以仅在 768 像素以上时应用？
else {
$("#sidebar").addClass("active");
$("#sidebarToggle").addClass("active");
}
【问题讨论】：
-
使用
width()jquery 方法简单计算窗口视口的宽度！旁注.. 不要忘记缓存 jquery 对象。$("#sidebar")和$("#sidebarToggle")应该在滚动处理程序之外定义，以防止每次事件发生时 DOM 被滚动（在下面使用嘶嘶引擎）:)。否则，处理程序可能需要更多时间来执行，（尤其是在一段时间内多次触发的事件，如滚动、鼠标移动等）有时会导致延迟效果。 -
嘿@Stphane。我不确定如何实施您的建议，但我非常感谢您的时间。你能提供任何帮助吗？我似乎已经找到了问题，并更新了问题。请参阅“更新”。你能解释一下吗？
标签： javascript jquery html css jquery-mobile