Question

我今天好像在问很多问题......但是我觉得玩这些代码很有趣：p

因此，我的问题是，当页面具有较长的垂直长度且导航栏处于活动状态时（通过按下汉堡包图标并滑出导航栏），没有什么可以阻止用户向下滚动并使用导航栏它。它并不可怕，但理想情况下我想在导航栏打开时禁用滚动，否则你的屏幕上会出现浮动导航栏，这很奇怪。

现在，快速谷歌搜索告诉你（以许多不同的方式），这个问题的潜在解决方案是添加位置：fixed和overflow：none到html，body标签或包装器以禁用滚动...虽然这确实有效，但它会完全禁用滚动条，无论导航栏是否出局，这不是我想要的。我想要的是在导航栏退出时禁用滚动...当导航栏缩回时，用户应该能够正常向下滚动

HTML

eclipse.buildId=unknown
java.version=1.8.0_71
java.vendor=Oracle Corporation
BootLoader constants: OS=win32, ARCH=x86, WS=win32, NL=en_US
Command-line arguments:  -os win32 -ws win32 -arch x86

!ENTRY org.eclipse.ui.ide 4 4 2016-06-03 08:20:50.414
!MESSAGE Could not read version file

!ENTRY org.eclipse.ui.ide 4 4 2016-06-03 08:20:50.415
!MESSAGE An unexpected network error occurred
!STACK 0
java.io.IOException: An unexpected network error occurred
    at java.io.FileInputStream.readBytes(Native Method)
    at java.io.FileInputStream.read(Unknown Source)
    at java.util.Properties$LineReader.readLine(Unknown Source)
    at java.util.Properties.load0(Unknown Source)
    at java.util.Properties.load(Unknown Source)
    at com.aptana.rcp.IDEApplication.readWorkspaceVersion(IDEApplication.java:419)
    at com.aptana.rcp.IDEApplication.checkValidWorkspace(IDEApplication.java:366)
    at com.aptana.rcp.IDEApplication.promptForWorkspace(IDEApplication.java:347)
    at com.aptana.rcp.IDEApplication.checkInstanceLocation(IDEApplication.java:254)
    at com.aptana.rcp.IDEApplication.start(IDEApplication.java:112)
    at org.eclipse.equinox.internal.app.EclipseAppHandle.run(EclipseAppHandle.java:196)
    at org.eclipse.core.runtime.internal.adaptor.EclipseAppLauncher.runApplication(EclipseAppLauncher.java:110)
    at org.eclipse.core.runtime.internal.adaptor.EclipseAppLauncher.start(EclipseAppLauncher.java:79)
    at org.eclipse.core.runtime.adaptor.EclipseStarter.run(EclipseStarter.java:354)
    at org.eclipse.core.runtime.adaptor.EclipseStarter.run(EclipseStarter.java:181)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
    at java.lang.reflect.Method.invoke(Unknown Source)
    at org.eclipse.equinox.launcher.Main.invokeFramework(Main.java:636)
    at org.eclipse.equinox.launcher.Main.basicRun(Main.java:591)
    at org.eclipse.equinox.launcher.Main.run(Main.java:1450)

CSS

<body>
  <input type="checkbox" id="nav_drawer" name="" value="">
  <div id="wrapper">
    <label for="nav_drawer" class="nav_drawer_toggle">&#x2261;</label>

    <header class="logo">
      <h1><a id="nav_logo" href="/index.php">Title</a></h1></header>

    <nav class="navigation">
      <ul>
        <li><a class="nav_link" href="/index.php">Home</a></li>
        <li><a class="nav_link" href="#">1</a></li>
        <li><a class="nav_link" href="#">2</a></li>
        <li><a class="nav_link" href="#">3</a></li>
        <li><a class="nav_link" href="#">4</a></li>
        <li><a class="nav_link" href="#">5</a></li>
        <li><a class="nav_link" href="#">6</a></li>
      </ul>
    </nav>

    <main>
      <div id="announcements_box">
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      <p>TTT</p>
      </div>
    </main>

这个jsfiddle显示了我指的是什么。只需点击汉堡图标，然后向下滚动即可查看：https://jsfiddle.net/7zon9vsz/

Answer 1

这是什么意思？在position: fixed;上将position: absolute;更改为.navigation，您可以在导航打开的情况下滚动，它将保持在其位置。 jsfiddle

在导航栏扩展时禁用滚动

1 个答案: