Question

我想为我的网站垂直创建一个固定的导航栏。目前我使用的是各个帖子中提到的那个：

HTML：

<html>
<head>
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'navbar.css' %}">   

    <script type="application/javascript">
        $(document).ready(function () {
            var navPos = $('.nav_menu').offset().top; //Sticky navbar
            $(window).scroll(function () {
                var scrollPos = $(this).scrollTop();
                if (scrollPos >= navPos) {
                    $('.nav_menu').addClass('fixed');
                } else {
                    $('.nav_menu').removeClass('fixed');
                }
            });
        });
    </script>
    .....
    <div class="nav-container">
        <div class="nav_menu">
            Bars go here
    ....

和CSS：

.nav-container .nav_menu.fixed {position: fixed; z-index: 10000; top: 0; width: 195px; padding-left: 8px}

此解决方案效果很好，导航栏很贴，在我的情况下，导航栏位于页面的左上角。如果我向下滚动它完全跟随滚动。如果我使用一个小窗口打开gape并且我向右下方加上右边的栏跟随（应该发生）。但是我希望酒吧只能垂直跟随，如果有人向左或向右滚动，酒吧应该保持原样。

我怎样才能实现这个目标？

Answer 1

您可以通过应用减去左侧滚动来停止水平固定：

＆＃13;

var $window = $(window);
var navPos = $('.nav_menu').offset().top; //Sticky navbar

$window.scroll(function() {
  var scrollPos = $window.scrollTop();
  var left = 0 - $window.scrollLeft();

  if (scrollPos >= navPos) {
    $('.nav_menu').addClass('fixed').css('left', left + 'px');
  } else {
    $('.nav_menu').removeClass('fixed').css('left', 0);
  }
});

＆＃13;

body,
html {
  height: 1000px;
  width: 2000px;
  position: relative;
  margin: 0;
  padding: 0;
}

.nav_menu {
  height: 50px;
  background-color: blue;
  width: 195px;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br><br>
<div class="nav_menu"></div>

＆＃13;

垂直固定的导航栏

1 个答案: