Slide the navbar and bottom toolbar up or down when scrolling, similar to the Pinterest app's functionality

Similar to the functionality in the Pinterest app, I want my top navigation bar to slide up/down and at the same time have my bottom toolbar slide down/up when scrolling.

While I've successfully made my top navigation bar hide/show using the code provided below, I'm struggling to achieve the same effect with my bottom toolbar. Any guidance from experienced individuals in the field would be greatly appreciated as I am relatively new to this.

JQuery:

$(document).ready(function(){

var previousScroll = 0,
    headerOrgOffset = $('#header').height();

$('#header-wrap').height($('#header').height());

$(window).scroll(function () {
    var currentScroll = $(this).scrollTop();
    if (currentScroll > headerOrgOffset) {
        if (currentScroll > previousScroll) {
            $('#header-wrap').slideUp();
        } else {
            $('#header-wrap').slideDown();
        }
    } 
    previousScroll = currentScroll;
}); });
javascriptjqueryhtmlioscss

Answer №1

In reference to the structure provided in the jsfiddle link:

--HTML

<div id="header-wrap">
    <div id="header" class="clear">
        <nav><h1>Header</h1>another line<br/>another line
        </nav>
    </div>
</div>
<div id="footer-wrap">
    <div id="footer" class="clear">
        <nav><h1>Footer</h1>another line<br/>another line
        </nav>
    </div>
</div>

--CSS:

body {
    height: 1000px;
}

#header, #footer {
    width: 100%;
    height: 120px;
    /*position: absolute;*/
    background-color: #e0e0e0;
}

#header {
    top: -20px;
    position: relative;
}

#header-wrap, #footer-wrap {
    width: 100%;
    position: fixed;
    padding: 0px;
    /*background-color: #e0e0e0;*/
}

#header-wrap {
    top: 0px; 
}

#footer-wrap {
    bottom: 0px; 
}

--JS

$(function() {
    var previousScroll = 0,
        headerOrgOffset = $('#header').height();

    //$('#header-wrap').height($('#header').height());

    $(window).scroll(function () {
        var currentScroll = $(this).scrollTop();
        if (currentScroll > headerOrgOffset) {
            if (currentScroll > previousScroll) {
                $('#header').slideUp("slow");
                $('#footer').slideDown("slow");
            } else {
                $('#header').slideDown("slow");
                $('#footer').slideUp("slow");
            }
        } 
        previousScroll = currentScroll;
    });
});

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

What is the best way to target the nth-child() of a slotted element within a web component that utilizes multiple uniquely named slots?

I am struggling to select the second slotted item in a specific slot using slot[name=foo]::slotted(:nth-child(2)){, but it's not behaving as I anticipated. Even though the first foo slot is styled with green, the second one doesn't follow suit. ...

javascriptcssweb-component

How can you refresh the .replaceWith method in jQuery?

Is there a way to reset the .replaceWith function so that the html, css and javascript elements are restored to their original state? I am looking to have an icon replace the text when the user clicks on "contact", and then have the text return when the u ...

javascriptjqueryhtmlcssreplacewith

Using jQuery each with an asynchronous ajax call may lead to the code executing before the ajax call is completed

In my jQuery script, I utilize an each loop to iterate through values entered in a repeated form field on a Symfony 3 CRM platform. The script includes a $.post function that sends the inputted value to a function responsible for checking database duplicat ...

javascriptjqueryajax

Use javascript to modify a specific section of a link

I have a set of datatable rows with links that contain data, and I need to modify part of the link text. For instance, if the link is 200.0.0.10, I want to change it to 160.11.10.12. Despite attempting the following code, the link does not change: var ...

javascriptphpjqueryajax

Reaching out to a particular individual with a message

In my coding dilemma, I am trying to make a bot send a message every minute to a particular user, not all users. The struggle is real! guild.members.cache.forEach(member => { setInterval(() => { member.send('hello').catch(error =&g ...

javascriptnode.jsdiscord.jsbots

Unveiling the sequential fade-in feature with jQuery

Is there a method to modify this plugin so that the fade-in items are displayed at the top? Here is the link for reference: Thank you! ...

jquery

The radio button selection cannot be transmitted via email

Only the first radio button is selected <div class="field_radio" name="preference" > <input class="radio1" type="radio" name="preference" id="preference" value="team" onclick="ShowHideDiv()" /><label for="radio1"> ...

phpjqueryhtml

Nodejs for user matching flow

My current project involves creating a system where users can match with each other based on specific information. Here is the flow I am envisioning: User 1 fills in the required information and clicks "find". At the same time, User 2 also provides their ...

javascriptnode.jsmultithreadingexpress

Creating an Online Store with Python and Django for Server-side Development

Looking to create a dynamic E-commerce platform with Bootstrap, HTML, CSS, and JavaScript for the frontend, along with Python, Django, and MongoDB for the backend. Can someone provide me with step-by-step guidance on crafting code files for each language a ...

pythonhtmldjangobootstrap-4

Building a Navigation Menu in Vue.JS Using Bootstrap Styles

Greetings! I had previously developed a Menu for my Vue 2 project. Upon creating a new Vue 2 project (with plans to migrate to Vue3), I proceeded to import my Menu, which consists of HTML and CSS. Unfortunately, it seems that the implementation is not wor ...

cssvue.jsmenuvue-component

Jquery is failing to handle multiple inputs

I am currently working on a system that can handle multiple Yes/No questions. However, every time I try to submit the form, I encounter an error in the console that I cannot identify, and no data is returned from the query. Previously, I used an Array to s ...

javascriptjqueryhtmlajax

A JButton named "action" with HTML styling and a specific keyboard shortcut

My JButton is created with an Action that contains HTML in its name. To set the mnemonic on the JButton, I first need to extract the first character from the name by parsing out the HTML tags. For instance, if the JButton name is "Test Button", after re ...

javahtmlswingactionmnemonics

"Utilizing lightbox JS to produce a centralized overlay across the entire webpage

Currently in the process of redesigning a gallery for a client at www.stagecraft.co.uk/gallery.html I am encountering some challenges with my overlay. I want it to be centered and on top of any divs that are currently in view, as new images from the clie ...

jquerycssoverlaylightbox

Leverage the power of jQuery to seamlessly extract information from an ASP.NET gridview

My asp.net gridview is displayed as an HTML table and contains a series of checkboxes to indicate if the user wants to export data to Excel. I want to retrieve the ID of the corresponding row when a checkbox is checked using jQuery. I prefer not to go bac ...

jqueryasp.net

Discover a different pattern in output by utilizing mango aggregation techniques

Hey there, I'm trying to retrieve the records from the database for the last four months. While I have managed to get some output, it doesn't align with my expected pattern. Can someone assist me in solving this issue? db.Air_pollution.aggregate ...

javascriptnode.jsmongodbaggregation-frameworkmongoose-schema

Why use getElementById(id) to obtain an element in JavaScript when it already exists in the JS?

Recently, I have observed that a reference to an HTML element with an id can be easily accessed in JavaScript by using a variable named after that id (jsbin). What is the reason for this behavior? Why do we need to use getElementById(id) when we could sim ...

javascripthtmldom

After replacing the Partial View with jQuery select picker, the CSS is not being applied

Encountering an issue ... I came across this helpful solution to swap out a partial view within a view. However, upon changing the partial view, the dropdown does not retain the default template CSS. To address this, I utilized the following jQuery code to ...

jquerycssajaxasp.net-mvcpartial-views

Maintaining consistent sprite text size in THree.js while zooming with an orthographic camera

When using three.js with an orthographic camera, the size of a Sprite can be magnified or reduced when zooming the mouse. To prevent the text size from changing, consider adjusting the camera settings and applying proper texture and material to the Sprite. ...

javascriptcanvasthree.jssprite

Ajax call failing to execute within Modal Dialog Box

At present, I have a button that displays cart contents like this: <a href="#" class="btn btn-info" role="button" data-toggle="modal" data-targets="showvendorcart1" data-target="#showvendorcartModal" data-async="true" data-cache="false" data-endpoint=" ...

phpjqueryajaxmodal-dialoglaravel-5

Clicking on a chart causes a null error in the 'removeHoverStyle' function

Here is a snippet of my base chart wrapper that utilizes ReactJS 16.8+ with ChartJS 2.0+ import React, { useEffect } from 'react'; import PropTypes from 'prop-types'; import Chart from 'chart.js'; import ChartDataLabels from ...

javascriptreactjschart.js