Header should elegantly glide up and down as the user scrolls through the page

I've implemented a top div on my page that houses contact details and social media links. I've managed to hide it during scrolling and make it reappear when reaching the top of the page. However, I'm hoping to smoothen this transition with a slide-up and slide-down effect, which I've struggled to achieve so far. Below is the current code snippet:


        (function($) {
            "use strict";
            function mainNavbar() {
              if ($('#main_navbar').length) {
                $('#main_navbar').affix({
                  offset: {
                    top: 10,
                    bottom: function() {
                      return (this.bottom = $('.footer').outerHeight(true))
                    }
                  }
                });
              }
            }
            mainNavbar();
        })
      

        .top_header_area {
          background: #333333;
        }
        .top_header_area .top_nav li a {
          font: 400 14px/50px "Roboto", sans-serif;
          color: #fff;
          padding: 0;
          padding-left: 30px;
        }
        .top_header_area .top_nav li a i {
          color: #cc0033;
          font-size: 18px;
          padding-right: 10px;
        }
        .top_header_area .top_nav li a:hover,
        .top_header_area .top_nav li a:focus {
          background-color: transparent;
          color: #cc0033;
        }
        .top_header_area .top_nav li:first-child a {
          padding: 0;
        }
        .top_header_area .social_nav {
          margin: 0;
          padding-top: 12px;
        }
        .top_header_area .social_nav li a {
          font-size: 14px;
          color: #fff;
          padding: 0;
          text-align: center;
          height: 24px;
          width: 24px;
          border-radius: 50%;
          margin-left: 10px;
        }
        .top_header_area .social_nav li a i {
          line-height: 24px;
        }
        .top_header_area .social_nav li a:hover,
        .top_header_area .social_nav li a:focus {
          background: #cc0033;
          color: #333333;
        }
      

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <section id="top" class="top_header_area">
          <div class="container">
            <ul class="nav navbar-nav top_nav">
              <li><a href="#"><i class="fa fa-phone"></i>317-328-8492</a></li>
              <li><a href="#"><i class="fa fa-envelope-o"></i><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d34333b321d3c293e34333e73333829">[email protected]</a></a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right social_nav">
              <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
              <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
            </ul>
          </div>
        </section>
        <div class="main">
          <p>Here is some sample text<br>
            Scroll me<br></p>
        </div>
javascriptjqueryhtmlcssbootstrap-4

Answer №1

 $(window).scroll(function(){
if($(window).scrollTop() > 20 ){
 $('#top').addClass('slide');
}
else{
$('#top').removeClass('slide');
}
});
.top_header_area {
  background: #333333;
}

.top_header_area .top_nav li a {
  font: 400 14px/50px "Roboto", sans-serif;
  color: #fff;
  padding: 0;
  padding-left: 30px;
}

.top_header_area .top_nav li a i {
  color: #cc0033;
  font-size: 18px;
  padding-right: 10px;
}

.top_header_area .top_nav li a:hover,
.top_header_area .top_nav li a:focus {
  background-color: transparent;
  color: #cc0033;
}

.top_header_area .top_nav li:first-child a {
  padding: 0;
}

.top_header_area .social_nav {
  margin: 0;
  padding-top: 12px;
}

.top_header_area .social_nav li a {
  font-size: 14px;
  color: #fff;
  padding: 0;
  text-align: center;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  margin-left: 10px;
}

.top_header_area .social_nav li a i {
  line-height: 24px;
}

.top_header_area .social_nav li a:hover,
.top_header_area .social_nav li a:focus {
  background: #cc0033;
  color: #333333;
}
p{
position:absolute;
top:20%;
left:50%;}
.main{
width:100%;
  position:relative;
height:2000px;}

#top.slide{
  transform :translateY(-100%);
  opacity:0;
}
#top{
  transition: all 2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="top" class="top_header_area">
  <div class="container">
    <ul class="nav navbar-nav top_nav">
      <li><a href="#"><i class="fa fa-phone"></i>317-328-8492</a></li>
      <li><a href="#"><i class="fa fa-envelope-o"></i><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="deb7b0b8b19ebfaabdb7b0bdf0b0bbaa">[email protected]</a></a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right social_nav">
      <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
      <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
    </ul>
  </div>
</section>
<div class="main">
  <p>scroll me</p>
</div>

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

Can you explain the distinction between using <router-view/> and <router-view></router-view>?

In various projects, I have encountered both of these. Are they just "syntactic sugar" or do they hold unique distinctions? ...

javascriptvue.jssyntax

What is the best way to calculate the sum of table data with a specific class using jQuery?

If I had a table like this: <table class="table questions"> <tr> <td class="someClass">Some data</td> <td class="someOtherclass">Some data</td> </tr> <tr> <td class="s ...

javascriptjquery

PHP/JSON formatting

My goal is to populate a dropdown menu with entries from MySQL using a technique I found in this particular answer. It's functioning well - when an event is selected, a new dropdown appears with the dates that event is scheduled for. But now, I also ...

phpjquerymysqlajaxjson

Steps to prevent user input on a textbox in asp.net that is associated with a date picker

Within my web application built with asp.net, I have a textbox with a connected date picker using jQuery. The goal is to disable the ability for users to manually enter text into the textbox. Instead, they should only be able to select a date from the da ...

jqueryasp.net

Ensuring Bootstrap4 columns have a minimum height within a row

How can I adjust the right column in this image layout to crop the height and match it with the left column, aligning the bottoms of the images? This customization should only apply to lg+ screen sizes. An ideal solution using Bootstrap 4 without jQuery i ...

cssbootstrap-4

Difficulty arises with z-index when hover effects are applied to clip-path shapes

I'm encountering an issue where I am attempting to make two clip path polygons overlap each other when hovered over by the mouse. I have been using z-index values and trying to adjust them based on which overlay is being hovered over, but unfortunatel ...

htmlcssz-indexclip-path

What is the reason behind the NgForOf directive in Angular not supporting union types?

Within my component, I have defined a property array as follows: array: number[] | string[] = ['1', '2']; In the template, I am using ngFor to iterate over the elements of this array: <div *ngFor="let element of array"> ...

javascriptangulartypescript

Bootstrap table issue: server side call fails to trigger

I'm in the process of familiarizing myself with the bootstrap table plugin, which can be found at this link: The specific example I'm attempting to replicate is located here: Here's my HTML code: http://jsfiddle.net/6h5sqs9d/ Within my cg ...

jquerytwitter-bootstrappagination

Issue with Bootstrap 3 Flat theme following the recent upgrade to Domino 12

Currently, I am working on xpages using Bootstrap with the Xpages Properties Application Theme "Bootstrap3.2.0_flat". However, after upgrading to Domino 12, I started encountering errors when trying to open xsp pages. I attempted changing the xsp Applicati ...

bootstrap-4xpageslotus-domino

Guide to including spinner in React JS with TypeScript

I need help with adding a spinner to a React component. The issue I'm facing is that the spinner does not disappear after fetching data from an API. Can someone please point out what I am doing wrong? Here is the code snippet: import React, { useSta ...

javascriptreactjstypescript

CSS3 Animation for Marquee Image

I'm struggling to create a CSS3 animation for an image. My goal is to have the image continuously wrap around and scroll across the page, but I can't get it to work as intended. Here's a simple snippet of my HTML: <div id="space" class=" ...

htmlcssmarquee

Exploring the option of showcasing multiple json_encode data on a pie chart

Hey there! I'm currently utilizing Chart.js to generate a pie chart by retrieving data from the database: <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> <script> var ctx = document.getE ...

javascriptphplaravelcharts

Trigger an action in the clean-up function of useEffect

I am facing an issue with a form component in a Material UI <Tab /> where users can update their address information. The data is fetched from the API using redux-thunk, and the form fields are pre-filled with server data before the update occurs. h ...

javascriptreactjsreduxmaterial-uiredux-thunk

Exploring the quirky characters in the PHP mail() function

Currently using the php mail function, it's somewhat effective, although not my preferred method. However, it seems I must make do for now. The issue at hand is that special European characters are showing up strangely in the email. I attempted to se ...

phpjavascriptjqueryajaxemail

How to display information from a JSON file using dynamic routing in a React.js application

I'm currently working on a project to replicate Netflix using reactjs, but I've hit a roadblock and can't figure out what to do next. I've tried watching YouTube tutorials and reading articles online, but I haven't been able to fin ...

javascriptreactjsjsonreact-router

Tips for troubleshooting the error "Cannot locate module mp3 file or its associated type declarations"

https://i.sstatic.net/q4x3m.png Seeking guidance on resolving the issue with finding module './audio/audio1.mp3' or its type declarations. I have already attempted using require('./audio/audio1.mp3'), but continue to encounter an error ...

javascripttypescriptreact-hooks

What is the best way to tile textures in Three.js without causing distortion?

Despite trying various solutions, I am still facing an issue where my textures appear to be stretched or scaled based on the mesh size. In a bid to seek a resolution, here are some key points to note: All textures have dimensions of 64x64 pixels I have p ...

javascriptthree.jstexturestexture-mapping

Unexpected behavior when using Async.map in conjunction with async.waterfall

Utilizing Async, I am using async.map() to connect my data array with a function and incorporating async.waterfall() within that function to execute functions in a series. However, the waterfall function is not functioning as anticipated. I have also attem ...

javascriptnode.jsasync.js

Having trouble retrieving a Controller parameter from a form in ASP.NET MVC?

Currently encountering an issue with a controller that is structured as follows: public class AccountsController:Controller { public ActionResult List(int? page, int? pageSize, string keywords) {...} } The approach we are using to send data to this c ...

jqueryasp.net-mvc

Utilize JavaScript to retrieve data from a JSON document

To extract information from a .json file in node.js, the require function is used. I'm currently developing an Artificial Neural Network that utilizes this code to fetch data from the data.json file. const fs = require('fs'); const json = ...

javascriptbrowser