Question

我正在使用以下代码显示在登陆时可见的响应侧边栏，当用户滚动到顶部和/或单击菜单链接div时。如果用户扩展了侧边栏，则一旦用户向上或向下滚动100px，它将再次崩溃。

这在桌面上运行良好，但在移动设备上并不是最好的用户体验。我想禁用在移动设备上自动扩展/折叠的脚本部分，即＆lt; 414px？我也希望它在着陆时隐藏，即删除.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的功能。下面的snippit可以编辑为仅适用于768px以上吗？

    else  {
        $("#sidebar").addClass("active");
        $("#sidebarToggle").addClass("active");
    }

Answer 1

更改您的功能

print(calculate_quality_points(30, 20, 4, 3))

Answer 2

难道你不能在你的JS中添加一个简单的if ($window.width() > 414) {}吗？

if ($window.width() > 414) {
  if (relativeY > 100 || relativeY < -100) {
    $("#sidebar").removeClass("active");
    $("#sidebarToggle").removeClass("active");
    $(".line").css("top", "0")
  } else if ($window.width() > 768) {
    $("#sidebar").addClass("active");
    $("#sidebarToggle").addClass("active");
  }
}

移动设备上的响应侧栏禁用

2 个答案: