Bottom-fixed navigation bar with adhesive functionality

I have been attempting to create a navigation bar that starts at the bottom of the page and then sticks to the top as the user scrolls, similar to the functionality on this website (http://grovemade.com). However, I have had little success so far.

Could someone please offer guidance or point me in the right direction regarding the necessary HTML and CSS to achieve this effect?

If you visit my website, you will see that the second navigation bar has been implemented using the code provided below. I just need assistance with adjusting the values to determine when and where the navigation bar sticks to the top of the page.

Any help is greatly appreciated. Thank you. Josh

jqueryhtmlcss

Answer №1

It goes by the name of Sticky Nav. Are you interested in something similar?

$(function () {
  ht = $("h3").offset().top;
  $(window).scroll(function () {
    console.log($(window).scrollTop() > ht);
    if ($(window).scrollTop() > ht)
      $("h3").addClass("fixed");
    else
      $("h3").removeClass("fixed");
  });
});
* {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI';}
p, h3 {margin-bottom: 10px; line-height: 1.5;}
h3 {text-align: center; border: 1px solid #ccc; border-width: 1px 0;}
h3.fixed {position: fixed; top: 0; left: 0; background-color: #fff; right: 0;}
<!DOCTYPE html>
<html>
  <head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe dolore explicabo quo possimus accusantium doloremque necessitatibus pariatur, natus numquam beatae, dignissimos quisquam illum voluptas eos et velit, consequuntur eligendi totam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum iusto nemo nisi eum necessitatibus, eaque ratione tempora fuga! Molestias repellendus modi nostrum obcaecati, dignissimos, odit! Culpa voluptatem iste, illo totam!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nostrum ratione unde et non minima animi, cum ut vero, voluptatem quia facere facilis libero nobis eaque ab pariatur recusandae commodi!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus aperiam officia corporis, modi ea. Non voluptatum, molestiae in soluta a ipsa iusto aut. Alias possimus praesentium architecto aperiam, porro maxime.</p>
    <h3>This would become fixed soon!</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe dolore explicabo quo possimus accusantium doloremque necessitatibus pariatur, natus numquam beatae, dignissimos quisquam illum voluptas eos et velit, consequuntur eligendi totam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum iusto nemo nisi eum necessitatibus, eaque ratione tempora fuga! Molestias repellendus modi nostrum obcaecati, dignissimos, odit! Culpa voluptatem iste, illo totam!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nostrum ratione unde et non minima animi, cum ut vero, voluptatem quia facere facilis libero nobis eaque ab pariatur recusandae commodi!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus aperiam officia corporis, modi ea. Non voluptatum, molestiae in soluta a ipsa iusto aut. Alias possimus praesentium architecto aperiam, porro maxime.</p>
    ... (repeated lorem ipsum content removed for brevity) ...
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe dolore explicabo quo possimus accusantium doloremque necessitatibus pariatur, natus numquam beatae, dignissimos quisquam illum voluptas eos et velit, consequuntur eligendi totam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum iusto nemo nisi eum necessitatibus, eaque ratione tempora fuga! Molestias repellendus modi nostrum obcaecati, dignissimos, odit! Culpa voluptatem iste, illo totam!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nostrum ratione unde et non minima animi, cum ut vero, voluptatem quia facere facilis libero nobis eaque ab pariatur recusandae commodi!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus aperiam officia corporis, modi ea. Non voluptatum, molestiae in soluta a ipsa iusto aut. Alias possimus praesentium architecto aperiam, porro maxime.</p>
  </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for streamlining the filter function using replace and split:

Currently, I am utilizing a filter function alongside replace() and split(). Here is the code snippet: jQuery('table .abc').filter((i, el) => jQuery(el).text(jQuery(el).text().replace('a', 'b').split(' ')[0] + &ap ...

javascriptjqueryfilterreplacesplit

I seem to be having trouble with jQuery. Every time I try to submit my form, nothing happens

I am currently working on creating a web page for a numerical game, but I am facing difficulties with my jQuery implementation. Despite checking all my placements, nothing seems to happen when I click on the Submit button. Any assistance would be greatly a ...

javascriptjqueryhtml

Customizing alert message styles in Java script: Changing color and font of specific parts

I have been attempting to change a specific part of text to be bold and displayed in red color. Unfortunately, this does not seem to work on Microsoft Edge. Here is my code: alert("Hi how are you my friend"); The section that needs to be formatted: "fri ...

javascripthtmlcss

Develop with originate effect JQuery animation

Looking for help on creating a popup div that grows outward from the center of a button and slides to the center of the screen when clicked. Struggling to find snippets, any assistance would be appreciated. Special thanks to Jamie Dixon for helping me get ...

jqueryanimation

div table with varying cell styles on each row

Is it feasible to achieve a table layout resembling the one depicted below using only div tags and CSS? _________________________________________________ | | | | | | | | ...

htmlcss

"Unfortunately, the JavaScript external function failed to function properly, but miraculously the inline function

Struggling to create a fullscreen image modal on the web? I was able to get it working fine when embedding the script directly into my HTML file, but as soon as I moved it to an external JS file, things fell apart. I've double-checked all the variable ...

javascripthtmlcss

Tips on restricting access based on User Browser type and version

I have a question regarding: My web application is built using PHP, AJAX, Javascript, CSS, and other technologies that may not be fully compatible with older browsers. Certain functions and styles might not work correctly on outdated browser versions. Th ...

javascriptphpjquerycssajax

Ways to reload an independent page in order to access PHP session variables:

Starting off, I want to mention that my approach may not be the most efficient. As a novice in JavaScript and PHP, I am aware that there are better and simpler ways to achieve what I'm attempting. The issue seems to be related to session variables an ...

javascriptphphtmlajax

Having trouble with the collapse feature on my DataList cards

I have a sample card and a DataList on my webpage. The collapse functionality is functioning correctly on the example card, but I am unable to get it to work on the actual cards. Below is the code snippet for reference: <div class="resultadosEspe ...

htmlasp.netbootstrap-4

Using an onClick event along with jQuery to change the CSS class style of another div

After searching extensively without success, I decided to register and ask my first question here. Hopefully, someone can provide a solution: My goal is to create a set of five buttons (divs) with onClick events that will show five different divs. I' ...

javascriptjquerycssfunctionclass

Is it possible to assign a class to the initial word within a designated class?

How can I customize the first and second word of a specific class in my code? This is an example of my current code: <h2 class="content-heading">Latest News</h2> I would like to achieve something similar to this: <h2 class="content-headi ...

javascriptjqueryhtmlcss

Enlarge the icon so that it is bigger than the text, but ensure that both the icon and

Can someone please help me figure out how to align the icon with the text on this button? https://i.sstatic.net/Jtc3E.png Here is the current code I have: .btn { -webkit-border-radius: 4; -moz-border-radius: 4; border-radius: 4px; font-family: & ...

htmlcss

The success function of the Ajax request remains untouched by the response

My ajax call isn't triggering the success:function(resp){ ...} Despite receiving a response status of 200 and a non-null Json response. This is my ajax setup: $.ajax({ url: '/url/', type: 'GET', data: { pass_ ...

javascriptjqueryjsonajaxdjango

Creating a Masonry Slider with varying heights and widths of images is a simple and effective way to showcase diverse content in a visually

I am looking to implement a unique grid image slider that accommodates images of varying heights and widths. I envision something similar to the example shown below. The image showcases a pattern where the sliders alternate between square images and two r ...

jquerycssreactjsslick.jsowl-carousel

Identifying overflow of text or elements in JavaScript during execution

The website I'm working on has a unique design that requires users to scroll horizontally using the Arrow Keys instead of swiping. To achieve this, I must constantly check for overflow in text or elements each time a new page is loaded, and if necessa ...

javascriptjquerycsshtmlcss-animations

How can I upload a folder with subfolders and keep the structure intact?

I'm working on a form that allows me to upload a folder containing both files and subfolders with more files inside. I managed to upload the folder successfully, but when I check my directory, all the files are in one folder without the subfolders. My ...

javascriptphphtmljqueryajax

Error with Display of ASCII Character 62 in Superfish Menu

Currently, I have implemented the Superfish menu on my website. In order to indicate sub-menus within my menus, I have opted to utilize the character entity code &#62;, which historically has represented ">". Oddly enough, while viewing my website ...

htmlcssinternet-explorer-8superfish

Building a Laravel 4 application with dynamic cascade dropdowns using Jquery ajax

Trying to update a select box based on the value selected in another select box using Laravel 4. Having some logic issues :S My Javascript Code: $('#cat').change(function(){ category_id = $(this).val(); $('#secondcat').empty() ...

javascriptphpjqueryajaxlaravel

Custom Sizing for Bootstrap Modals

I need assistance with creating a dynamic bootstrap modal that adjusts its width based on the content and includes a vertical scrollbar when needed. Although the vertical scrollbar is functioning correctly, the horizontal width appears to be static. C ...

csstwitter-bootstrap

What is the reason my synchronous jQuery AJAX callback is failing to function?

I am interested in learning about jQuery AJAX with callbacks, so I created this example: <?php sleep($_POST['sleep']); echo 'sleep for '.$_POST['sleep'] .'sec'; ?> $(function () { var timer = [5,2,3,1 ...

jqueryajaxsynchronous