Navigation bar stays concealed on mobile devices until manually dragged down with a touch

I am in the process of creating a mobile website (non-native) for an iPhone 4. I want to include a "header" that is 80 pixels high and 100% wide, but remains hidden until the user swipes down on the screen.

I found a helpful article that almost meets my needs:

However, the solution provided in the article is more complex than what I require and includes additional features that I don't need. When I attempted to integrate it into my existing webapp, it caused styling issues and didn't work correctly. The article uses styles that are unnecessary for my project. Rather than spending hours tweaking their styles and deciphering which ones are necessary for the pulldown effect, I am seeking a simpler approach to achieve this functionality.

My goal is to allow users to slide their finger downwards on the mobile webpage to reveal the hidden header. When they release their finger, the header should slide back up and become invisible again. I don't need any extra bells and whistles beyond that.

Additionally, I am curious about which "event" is triggered in a mobile browser when a user pulls the webpage downwards with their finger. Is it the "onscroll" event or something specific to mobile devices?

Thank you.

htmlcssjquery-mobilemobile

Answer №1

If you want this effect to happen on any content displayed, one way to achieve this is by using an anchor to position the page just below the header. This means when the user scrolls up to the top of the page, the header will be revealed. You can implement this using a javascript onload() event to automatically scroll to the anchor:

<script type="text/javascript">
function load() {
    var urllocation = location.href;
    if(urllocation.indexOf("#anchor") > -1){
        window.location.hash="anchor"; 
    } else {
    return false;
    }
}
</script>
<body onload="load()">

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

Maintaining consistent div height in Bootstrap 4 flexbox design

I'm currently using Bootstrap 4 with flexbox enabled, but I'm having trouble making the row > col > div boxes have equal heights. I attempted to use position: absolute, but it's not the ideal solution. Below is a screenshot of the is ...

htmltwitter-bootstrapcssflexbox

automatically collapse a submenu once a different menu option is selected

After doing some research and trying out various solutions, I still couldn't get it to work. I made adjustments to my dropdown menu and click function so that each submenu opens and closes when its parent is clicked. However, I'm now looking to f ...

javascripthtmlcssreactjsnext.js

The overflow scroll feature is activated, causing the background to appear greyed out, yet the

I've been struggling for hours to achieve this layout: Check out the code example here html, body { height: 100%; overflow-y: hidden; overflow-x: hidden; margin: 0px; padding: 0px; } .MyNavbar { height: 30px; background-color: red; } ...

htmlcss

What is the process of adding information to a database from a table using JSP?

Is it possible to store data into a database using JSP? Here is the code I have written, can you please help me find and correct any errors in it? My goal is to fetch data from form fields in a JSP page and store it into a database. Database name: test T ...

htmlmysqldatabasejsp

How to display (fade in a portion of an image) using .SVG

I have the following code in my DOM: <div class="icon-animated"><img src="icon_non_active.svg" id="icon_non_active"></div> There are two icons (.svg) available: icon_non_active & icon_active Can I animate the transformation from i ...

javascripthtmlcsssvg

Is there a way to create a flexbox that combines a centered fixed child with a fixed child at the bottom?

I'm trying to create a layout using flexbox that looks like this: | | | | | CENTER FIXED ELEMENT | | | | BOTTOM FIXED ELEMENT | Here is the flexbox CSS I've attempted: .wrapper{ ...

htmlcsslayoutflexbox

Tips for employing CSS hover within HTML elements?

Is there a way to achieve the following: <li style="hover:background-color:#006db9;"> I have tried this approach but it doesn't seem to work. Is there an alternative method, or do I need to include the CSS in the head section or an external CS ...

htmlcss

Customizing the color of text in the fillText() function on an HTML5 <canvas>

I need help changing the color of each line of text in my canvas messages. I've tried creating variables for them, but haven't had any success. Any assistance would be greatly appreciated. function initialize(){ var elem = document.getElemen ...

javascripthtmlhtml5-canvas

When it comes to form validations, I encounter an issue. I am able to view errors.minlength in the console, but for some reason, I am unable to access it

I would like the message "name is too short" to be displayed if last_name.errors.minlength evaluates to true. However, I encounter an error: Property 'minlength' comes from an index signature, so it must be accessed with ['minlength']. ...

htmlangularvalidation

What could be causing the lack of changes when trying to use justify content within the parent div?

I've been delving into CSS and trying to utilize justify-content in flex to center my content, but unfortunately, it's not cooperating. Here is the code I'm working with: .top-container{ display: flex; flex-flow: row nowrap; ma ...

htmlcssflexboxcontainersdisplay

What is the process for adding an SVG image (icon) to the navigation bar of a Quarto document?

I am trying to incorporate an SVG icon into the navigation bar using Quarto, but I am facing difficulties in getting it to work. The code snippet from my _quarto.yml file looks like this: navbar: ... right: - icon: github href: https://github.com/ ...

htmlryamlnavbarquarto

table that can be scrolled horizontally

I am facing an issue similar to the one discussed in this thread about responsive design for html wide table. In essence, my problem involves a table that is wider than the container div, which has ten columns in width (using bootstrap). The challenge aris ...

jqueryhtmlcss

If the Ajax request is successful, scroll to the bottom of a Div using jQuery

An interesting scenario arises with this Div that contains user messages, where the newest message always appears at the bottom of the Div and triggers a scroll bar if the message count exceeds the height of the div: <div class="list-group-message" s ...

javascriptjqueryhtmlajaxautoscroll

When the resolution changes, the text shifts away from the bar in CSS

When I adjust the resolution of my display, the text on my top bar also changes. Can anyone help me fix this issue? In normal view: With changed resolution or smaller browser window: This is my HTML code: <body> <div class="top-panel"> ...

htmlcss

Are the links drifting to the left?

Some of the links on my website seem to be misbehaving and not following the CSS rules, floating to the left unexpectedly. Strangely, it's only the links that are affected; the rest of the text appears fine. For example, you can observe this issue at ...

htmlcsswordpress

What is the best way to showcase a bootstrap card in a horizontal layout using Jinja 2 and a for loop

I'm facing a challenge in showing bootstrap cards in a horizontal layout instead of the default vertical arrangement using a for each loop. Below is the code snippet: <div class="row"> <div class="col-lg-12"> {% for game i ...

htmlcsstwitter-bootstrapjinja2bootstrap-4

Attempting to align the dropdown menu to the left side

This is a challenge I'm facing: https://i.sstatic.net/d3PtN.png I'm attempting to align it in the following way: https://i.sstatic.net/GCwEO.png Below is the HTML code snippet: <li class='list-group-item'> <!-- The dropdow ...

htmlcss

Shift the image closer to the top of the sidebar next to the header

I am seeking to adjust the positioning of my circular image in the sidebar so that it aligns with my name in the header. The contact and tech skills sections may also require some tweaking. Although I have a grasp of the concepts of absolute and relative, ...

htmlcss

When the div is clicked, it changes color and then reverts back to its original color when another

I have encountered an issue where I need to differentiate the div I clicked on in order to avoid confusion, as the pop-up menu on my website will be identical with different links but the same buttons. I have been struggling to find a solution for quite so ...

javascriptjqueryhtmlcsswordpress

What is the best way to incorporate JSON data into an HTML document?

Currently, I am working on a project involving the creation of a playable ad for Facebook. Per Facebook's ad specifications (), only a single HTML file under 2mb is accepted for uploading. This necessitates the inlining of all external references into ...

javascriptjsonhtmlbase64