Ways to clear away adhesive header and maintain its fixed position

I've been tinkering with my website, which you can find at this link: . I used the html5 up template for it, and the template came with a sticky header. However, when the site is viewed on a smaller screen, there's an ugly gap that forms between the header and the banner. I want to prevent the header from moving down and always keep it at the top of the page.

I do like how the mobile menu slides out, so I want to find a way to disable the sticky header without affecting any other functions. Any ideas?

Cheers,

Gemma

javascriptcsshtmlscrollsticky

Answer №1

Implementing this solution can greatly improve the user experience on your website.

$(function(){
  $(window).scroll(function(){
    var winTop = $(window).scrollTop();
    if(winTop >= 30){
      $("body").addClass("sticky-header");
    }else{
      $("body").removeClass("sticky-header");
    }
  })
})
position:fixed 
z-index:9999

<!-- begin snippet: js hide: false -->

/* For Extra styling try this */
body.sticky-header{
    padding-top: 100px;
    header{
        height: 60px;
        h1{
            @include scale(0);
        }
    }
}

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

Is it possible to configure Nginx to provide HTTPS on port 10000 and implement Basic Auth for an Express app?

My Linux NodeJS/Express application is designed to serve a text file located at http://example.com/secret.txt. I am looking to restrict access to this file only over HTTPS on port 10000 with Basic Auth security measures in place. It's important to no ...

javascriptnode.jslinuxexpressnginx

Alignment of slider arrows in a CSS carousel with Bootstrap 4.1.1

Is there a way to position the carousel control arrows at the left and right ends of the screen in Bootstrap 4.1.1? I attempted the code below but it didn't yield the desired result. .carousel-control .icon-prev{ left: 5px } .carousel-control .icon ...

cssbootstrap-4carousel

What is the best way to send a prop for inline styling in a React component that contains an array of data?

My ShowData component is responsible for rendering in both my App.js and index.js files. import React from "react"; import SwatchData from "./SwatchData"; import { DataTestContainer } from "./DataTestContainer"; function ShowData(props) { const DataCom ...

javascriptjsonreactjs

Implementing the IF statement in jQuery

I've been trying to implement an overflow check when hovering over a div. The issue arises because I'm using jQuery for the hover function and then simple JavaScript for the overflow check in the next step. It seems that directly using an if-then ...

javascriptjqueryhtmlcss

Is it possible for a method within a class to retrieve properties from a different object within the same class?

I'm facing an issue with accessing the necessary object properties within a method. In my scenario, I have a Game class that generates a new game object. Once the object is created, I attempt to execute the draw method. This draw method requires infor ...

javascriptobjectmethods

Tips for managing the sequence of chosen items

Currently, I am utilizing the react-dropdown-tree-select component in my project. I have a question regarding changing the order of selected items. The current default behavior is for the selected item order to match the data list order. However, I woul ...

javascriptnode.jsreactjsreact-dropdown-tree-select

Parse a string in the format of "1-10" to extract the numbers and generate an array containing the sequence of numbers within the range

Looking to convert a string in the format "1-10" into an array containing the numbers within that range. Display the array on the screen using a for loop. For example, if "1-5" is provided, the resulting array should be: {1, 2, 3, 4, 5} Create a workflow ...

javascriptvcenter

How can I declare CSS variables in Next.js components' module.css just like in global CSS?

When writing CSS in our global file, we often define variables and styles like this: :root{ --orange:#e67e22; --black:#333; --light-color:#777; --border:.1rem solid rgba(0,0,0,.2); --box-shadow:0 .5rem 1rem rgba(0,0,0,.1); } *{ mar ...

javascriptcssreactjsnext.js

What are the steps to develop an ElectronJS application that displays "Hello world!" in the console after a button click?

Can anyone offer a helping hand? From the depths of imagination to the realms never before conceived by humans. Check out this HTML snippet: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hell ...

javascripthtmlnpmbuttonelectron

The img:first-of-type selector targets specifically the first image within a group

When a user visits my website using a touch device or without Javascript support, I want the first of two images to display. To achieve this, I am targeting them using Modernizr. The menu button at the top of the page: <img src="menubutton.png" alt="M ...

htmlcssmodernizr

Interacting with a third-party application via OAuth using Node server to send REST requests

https://i.stack.imgur.com/Znrp0.png I've been working on a server to manage chat messages and need to integrate with a JIRA instance. I'm currently using the passport-atlassian-oauth strategy for authentication and BearerStrategy for requests. H ...

javascriptnode.jsexpressoauth

Is it necessary to include specific versions in package.json when committing the yarn.lock file?

Do you believe it is beneficial to always commit the yarn.lock file, even though all versions are clearly specified in package.json and there should be no discrepancies among team members? I personally find it to be a time-consuming practice, especially w ...

javascriptnpmhadoop-yarnpnpm

Selecting the incorrect label while hovering over a checkbox

I am using Bootstrap and encountering an issue with displaying checkboxes after clicking on an accordion element. While the first checkbox is displayed correctly, the checkboxes inside the accordion do not appear as expected. It is confusing to me why thi ...

htmlcssbootstrap-4

Trigger an AJAX request to execute a PHP script when a button is clicked

When I click a button, I want to run an ajax function that calls a PHP script and displays the resulting data under a specific div. However, it is not currently working as expected. Upon checking the console, I noticed that no value is being passed to the ...

javascriptphpjqueryajax

What is the method to alter the fill of a circle using CSS when it is hovered over in JavaFX?

I am seeking assistance for a task involving a circle within an hBox. I would like the color of the circle to change when the mouse cursor hovers over it. Is there a way to accomplish this using JavaFX and CSS? If not, what is the recommended approach fo ...

javacssjavafxjavafx-8

How can jQuery determine the amount of line breaks within a div element?

My div wrap size is a percentage of the screen width, containing multiple .item divs that break into new lines as the window size decreases. I attempted to calculate the total number of boxes that could fit based on their widths compared to the container ...

javascriptjqueryhtmlcssweb

jQuery's outerHeight() and height functions may experience flickering or fail to update properly when the window is resized to an odd number

Two elements are placed side by side on a webpage. One element, with a fixed size of 100vh, is named .hero-half, while the other element, holding text of varying lengths, is fluid and labeled as .project-details. When the text container extends beyond the ...

javascriptjquerycssflickerouterheight

Step-by-step guide on implementing virtual scroll feature with ngFor Directive in Ionic 2

I am working on a project where I need to repeat a card multiple times using ngFor. Since the number of cards will vary each time the page loads, I want to use virtual scrolling to handle any potential overflow. However, I have been struggling to get it ...

javascriptangulartypescriptionic2

JSON data being sent through an AJAX request

Currently, I am developing a chat system that automatically refreshes using AJAX. Initially, I utilized the jQuery $.post function which worked fine for my needs. However, since I required JSON data from my PHP script, I switched to using the $.ajax functi ...

javascriptphpjqueryjsonajax

Accessing the return value from an ASP.NET web service in JavaScript outside of the callback function

I am facing an issue with my ASP.NET web service that returns a simple string value. I have successfully called this web service using JavaScript and the script manager. However, I am in need of accessing the return value directly from where I made the cal ...

javascriptasp.netweb-servicesscriptmanagerpagemethods