CODEWITHSUNDEEP
javascripthtmlcss
Gábor Erdős
Gábor Erdős

Reputation: 3699

Vertically fixed navigation bar

I would like to create vertically a fixed navigation bar for my site. Currently i use the one that has been mentioned on various posts here:

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
    ....

And CSS:

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

This solution works great, the navbar is sticked, in my case the navbar is on the top left side of the page. If i scroll down it perfectly follows the scroll. In case i open the gape using a small window and i stoll down plus right the bar follows (as it should happen). However i would like the bar to only follow vertically, in case someone scrolls left or right the bar should stay where it is.

How can i achieve this?

Upvotes: 0

Views: 1220

Answers (1)

Pete
Pete

Reputation: 58442

You can stop the horizontal fixed by applying minus left scroll:

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);
  }
});
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br><br>
<div class="nav_menu"></div>

Upvotes: 1

Related Questions