基于页面宽度的 js 条件问题

Issues with js conditional based on page width

本文关键字：js 条件 问题 于页面      更新时间：2023-09-26

我正在尝试使用以下代码根据页面宽度使侧边栏菜单具有粘性或不粘性。基本上，如果窗口宽度超过 768 像素，则"取消粘滞"应为 false，当窗口小于 768px 时，"取消粘"应为 true。如果用户调整页面大小，它也应该更新。

它在初始页面加载时正常工作，但在调整大小时并不总是如此。如果页面从 768>开始并减少，则取消粘滞从 false 更改为 true，就像我希望的那样;但是它以这种方式卡住，如果页面放大，它不会变回来。

如果页面以 <768 开头，则取消粘滞开始时设置为 true，就像我想要的那样，但调整页面大小不会改变任何东西——它始终保持真实。

我的条件有问题吗？

$(function(){
  $(window).resize(function(){
     if($(this).width() >= 768){
         jQuery('#info').containedStickyScroll({
             duration: 0,
             unstick: false
         });
     } else {
         jQuery('#info').containedStickyScroll({
             duration: 0,
             unstick: true
         });
     }
  })
  .resize();//trigger resize on page load
});

看起来您的插件没有删除它的旧事件/dom 元素。 每次调用 .containedStickyScroll 时，它都会保留一些以前的选项。

这是我为修复它所做的：

$(function(){
    $(window).resize(function(){
        if($(this).width() >= 768){
            jQuery('#info').containedStickyScroll({
                duration: 0,
                unstick: false
             });
             $(".scrollFixIt").remove();
             $(window).unbind("scroll");
         } else {
             jQuery('#info').containedStickyScroll({
                 duration: 0,
                 unstick: true
             });
         }
    })
    .resize();//trigger resize on page load
});

希望这有帮助。

相关文章：