Question

https://jsfiddle.net/9o73880z/ - 小提琴可能有助于理解我将在这里写的内容：）

我正在修复（但位置：绝对，因为最后它真的很长，我需要它滚动:)）我的页面上的菜单。

它扩展了点击（NAV附近的V）。当用户滚动页面时，它与用户一起使用。

$(window).scroll(function() {
    var sctre = $(window).scrollTop();
    if(sctre >= 95) {
        if($(".trefl-nav-switch").hasClass("trefl-zwiniete")) {$(".trefl-head-top").css({"padding-top":"40px","top":sctre-41,"background":"#fff"});}
        if($(".trefl-nav-switch").hasClass("trefl-rozwiniete") && sctre < menu_top_pos) {$(".trefl-head-top").css({"padding-top":"40x","top":sctre-41,"background":"#fff"});}
    }
    if(sctre < 95) {
        $(".trefl-head-top").css({"padding-top":"0px","top":"75px"});
    }
});

当滚动位置超过95时，它会与用户一起使用（仅适用于我正在处理的页面兼容性的值），但仅当折叠导航按钮时（hasClass（＆＃39; zwiniete＆＃39））。当它展开时（hasclass（rozwiniete））它会停止，因此用户可以滚动菜单，而不是页面本身。

现在是我的问题，我不知道如何实现：

我可以以某种方式强制浏览器只滚动内部＆＃34; trefl-head-top＆＃34;什么时候展开
1. 如果我在查看我的代码后无法做到，我会尝试做类似的事情 - 当我点击展开它时，记录trefl-head-top的位置（顶部属性）（var menu_top_pos），和IF菜单展开并且滚动位置是＆lt;小于menu_top_pos，更改＆＃34; top＆＃34; CSS。但不幸的是，我无法看到效果：（

if($(".trefl-nav-switch").hasClass("trefl-rozwiniete") && sctre < menu_top_pos) {$(".trefl-head-top").css({"padding-top":"40x","top":sctre-41,"background":"#fff"});}

责任代码。

我将不胜感激任何帮助，谢谢：）

Answer 1

当你打开菜单时，将它的css位置更改为fixed并添加overflow-y scroll和菜单的max-height，一旦达到指定的高度，它将触发菜单的滚动：

if ($(".trefl-nav-switch").hasClass("trefl-zwiniete")) {
  ...

  $(".trefl-head-top").css("position",'fixed');
  $(".trefl-head-top").css("overflow-y",'scroll');
  $(".trefl-head-top").css("max-height",'100px');
  $(".trefl-head-top").css("top",'0px');
  ...
}

关闭时需要设置$(".trefl-head-top").css("position",'absolute');并重置其余属性。你可能需要摆弄top属性来正确定位它，但你已经在代码中做了类似的事情

当滚动位置低于其顶部属性时移动div

1 个答案: