0

Tried to use some different methods but nothing really happened. This is my code, how can I make it sticky to the top of the page when scrolling down?

When I tried it the nav was behind the photo's and the text on the page. Anyone who could help me out?

<!-- Header start -->
<header>
        <div class="menu-area" id="">
            <div class="container">
                <div class="row">
                    <div class="col-md-3">
                        <div class="logo">
                            <!--== change the logo name ==-->
                            <a href="index.html">
                               <h3><span>CHRISTIAAN</span>DESMET</h3>
                            </a>
                        </div>
                        <!-- Responsive Menu Start -->
                        <div class="responsive-menu"></div>
                        <!-- Responsive Menu End -->
                    </div>
                    <div class="col-md-9 col-sm-12">
                        <div class="mainmenu">
                            <nav>
                                <ul id="navigation">
                                    <li class="current-page-item"><a href="#home">home</a>
                                    </li>
                                    <li>
                                        <a href="#overmij">
                                        over mij
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#producten">producten</a>
                                    </li>
                                    <li><a href="contact.html">contact</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</header>
<!-- Header End -->
Trygve
  • 13
  • 2
  • please google before asking a question on stackOverflow,the question was originally answered here https://stackoverflow.com/questions/28452235/make-a-nav-bar-stick-to-the-top-when-scrolling-with-css, it is probably a duplicate question,welcome to stackOverflow – Mahesh Jamdade Mar 18 '19 at 13:21
  • 1
    Possible duplicate of [Make a nav bar stick to the top when scrolling with css](https://stackoverflow.com/questions/28452235/make-a-nav-bar-stick-to-the-top-when-scrolling-with-css) – Mahesh Jamdade Mar 18 '19 at 13:22

3 Answers3

1

Just add class name and change as per your requirement

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;  
}
Community
  • 1
  • 1
Rajkumar
  • 1,017
  • 9
  • 12
0

HTML:

<div id="navbar">
<!-- navbar content Here -->
</div>

CSS:

#navbar {
  overflow: hidden;
  background-color: #333;
}

/* when navbar reaches top this should be added using JS*/
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}

JS:

// When the user scrolls the page, execute myFunction 
window.onscroll = function() {myFunction()};

// Get the navbar
var navbar = document.getElementById("navbar");

// Get the offset position of the navbar
var sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
Harshil Shah
  • 142
  • 2
  • 3
  • 13
0

It seems you are also using Bootstrap, if so; what you want is really simple; you just have to add the sticky-top class to the navbar and you're good to go, see here:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<p>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde illum voluptatibus, laborum porro quibusdam officiis cum repudiandae iusto neque, consequatur consectetur error beatae maiores eaque ratione qui temporibus iste quisquam modi minima doloremque
  iure. Cumque et labore incidunt alias enim magnam cum nam id ullam, modi nisi eos illo eaque amet hic eum ea natus consequatur necessitatibus! Asperiores, quaerat perspiciatis quibusdam laudantium sunt illo libero ex aspernatur dolores explicabo rem
  architecto eos ipsa temporibus repudiandae itaque fugiat tempore ducimus ad eligendi reiciendis commodi. Molestiae ea necessitatibus in dolorum inventore vero et rerum dolore similique, dolores porro adipisci facilis, blanditiis obcaecati cumque, quisquam
  voluptatibus nisi magni doloribus rem voluptatem explicabo quis accusantium quibusdam! At quo laudantium ad id eaque ex voluptas illum? Id, beatae. Ducimus, quam assumenda? Dignissimos ad iusto accusamus obcaecati, laudantium blanditiis nam non in repellat
  iste repellendus suscipit magni est sapiente vero dolorem deserunt velit veritatis eius inventore?
</p>

<nav class="navbar navbar-expand sticky-top navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<p>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde illum voluptatibus, laborum porro quibusdam officiis cum repudiandae iusto neque, consequatur consectetur error beatae maiores eaque ratione qui temporibus iste quisquam modi minima doloremque
  iure. Cumque et labore incidunt alias enim magnam cum nam id ullam, modi nisi eos illo eaque amet hic eum ea natus consequatur necessitatibus! Asperiores, quaerat perspiciatis quibusdam laudantium sunt illo libero ex aspernatur dolores explicabo rem
  architecto eos ipsa temporibus repudiandae itaque fugiat tempore ducimus ad eligendi reiciendis commodi. Molestiae ea necessitatibus in dolorum inventore vero et rerum dolore similique, dolores porro adipisci facilis, blanditiis obcaecati cumque, quisquam
  voluptatibus nisi magni doloribus rem voluptatem explicabo quis accusantium quibusdam! At quo laudantium ad id eaque ex voluptas illum? Id, beatae. Ducimus, quam assumenda? Dignissimos ad iusto accusamus obcaecati, laudantium blanditiis nam non in repellat
  iste repellendus suscipit magni est sapiente vero dolorem deserunt velit veritatis eius inventore?
</p>

<p>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde illum voluptatibus, laborum porro quibusdam officiis cum repudiandae iusto neque, consequatur consectetur error beatae maiores eaque ratione qui temporibus iste quisquam modi minima doloremque
  iure. Cumque et labore incidunt alias enim magnam cum nam id ullam, modi nisi eos illo eaque amet hic eum ea natus consequatur necessitatibus! Asperiores, quaerat perspiciatis quibusdam laudantium sunt illo libero ex aspernatur dolores explicabo rem
  architecto eos ipsa temporibus repudiandae itaque fugiat tempore ducimus ad eligendi reiciendis commodi. Molestiae ea necessitatibus in dolorum inventore vero et rerum dolore similique, dolores porro adipisci facilis, blanditiis obcaecati cumque, quisquam
  voluptatibus nisi magni doloribus rem voluptatem explicabo quis accusantium quibusdam! At quo laudantium ad id eaque ex voluptas illum? Id, beatae. Ducimus, quam assumenda? Dignissimos ad iusto accusamus obcaecati, laudantium blanditiis nam non in repellat
  iste repellendus suscipit magni est sapiente vero dolorem deserunt velit veritatis eius inventore?
</p>
IvanS95
  • 5,364
  • 4
  • 24
  • 62