The "sticky" positioning on the left side at 0 pixels stops working when a parent div

I'm currently working on a layout where the header disappears when scrolled, but the navigation and footer stay fixed. You can view it here:

https://play.tailwindcss.com/LiIq5be2Wz?size=360x640

The same code is also available in jsfiddle: https://jsfiddle.net/cdxqsfu4/

Although I have managed to get it to work, the framework I am using requires an app div. However, after adding it (or uncommenting it), only the top:0 property remains sticky, while left:0 does not. Any suggestions for fixing this?

UPDATE: The following specifications are essential:

  • The scrollbar should cover the entire view, including the header and footer.
  • When scrolling down, the header must disappear.
  • The navigation bar should stick to the top-left corner of the screen at all times.
  • The navigation bar should extend across the full width of the screen.
  • The footer should remain fixed to the bottom-left corner of the screen.
  • The footer should also span the complete width of the screen.
  • The header should be positioned outside the app div.
htmlcss

Answer №1

To resolve the issue, consider rearranging your markup structure. Nesting your header with the other div elements and applying an overflow-auto to one of them is a simple solution. It does not matter which one receives the overflow property. Previously, using two overflow-auto properties was necessary to workaround the problem, but it caused the header to lose its scrolling functionality.

View the updated layout in action on Tailwind Play.

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

Enhance Material-UI's SwipeableDrawer by incorporating a clickable handle

Is there a way to include a clickable handle in a material ui SwipeableDrawer? Something similar to what's shown on Google Maps here: Google Maps button.css position: absolute; top: 100px; left: -50px; width: 50px; height: 100px; z-index: 10000; // ...

cssmaterial-ui

Broken hyperlinks on images that have been crossfaded are causing issues

I am currently working on a unique design feature that involves 5 crossfading images with hover divs appearing above them. To achieve this effect, I have added link references to each image and set the CSS properties accordingly for smooth animation. In ...

htmlcss

The loop is being controlled but the data is not being added and shown in the HTML div

I am struggling to display JSON data in an HTML div using a for loop. While my control is entering the loop, the data is not being appended and displayed in the HTML div. Here is the JSON data: [{"id":"15","FirstName":"ranjan","MiddleName":"","LastName": ...

javascriptphpjqueryhtmljson

Enable the use of custom tags containing hyphens in the kses filter for WordPress

I developed a specialized Wordpress plugin that enables users to incorporate custom HTML element tags (such as <my-element>) into the content of a Post. This allows users without the unfiltered_html capability to utilize predefined custom tags. The ...

phphtmlwordpress

Stopping all animations with JQuery animate()

I have a question about stopping multiple animations. Here's some pseudocode to illustrate my situation: CSS #div1 { position: absolute; background-image: url("gfx/cat.jpg"); width: 60px; height: 70px; background-size: 50%; b ...

javascriptjquerycss

Material Design Angular2 Toolbar

I am currently working on designing a toolbar using Material and Angular2. My main challenge is formatting the toolbar in such a way that the search bar appears centered in white, while the "Create Project" button and other buttons are aligned to the right ...

htmlcssangularangular-materialangular-material2

Can someone guide me on how to utilize the onkeyup event within a bootstrap select element?

This code uses Bootstrap to filter elements, but I want to implement an onkeyup event to trigger a function. Whenever I type in the search input, I want it to automatically call myFunction(). <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/ ...

htmlbootstrap-5

Is it possible to trigger multiple button clicks using JQuery simultaneously?

Hello everyone, I am new to StackOverflow and this is my first question here. I hope it's not too silly. Thank you in advance for your help! I am trying to achieve a functionality where one button click triggers the clicks of multiple other buttons u ...

javascriptc#htmljquerycallback

AngularJS : Resolving Alignment Issues with ng-repeat and ng-include

The ng-repeat feature is being utilized here with an inclusion of a different HTML partial. <div ng-repeat="item in feedItems"> <div ng-include="'item.itemType.html'"> </div> </div> Below is the CSS for the partial H ...

htmlcssangularjs

Exploring the World of Bootstrap 4 Cards

Just starting out in UI/UX, I played around with some gallery transitions featuring hover effects, and incorporated Bootstrap cards into the mix. When I hover over the image (which was blank at first), it now displays an overlay with the intended text, alo ...

cssbootstrap-4responsive-designbootstrap-cards

Tips on utilizing the identical template in ngIf

I need to display different templates based on certain conditions. For example: <template [ngIf]="item.url.indexOf('http') == -1"> <a class="ripple-effect" [routerLink]="[item.url]" *ngIf="isUserLoggedIn == true" > ...

javascripthtmlangulartypescriptangular-ng-if

Determine the time variance in hours and minutes by utilizing the keyup event in either javascript or jquery

There are 6 input fields, with 5 input boxes designated for time and the result expected to display in the 6th input box. See the HTML below: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input ty ...

javascriptjqueryhtmldatetimetime

Why does the video cover extend past its lower boundary in HTML?

I'm facing an issue where a purple cover over the <video> element extends slightly beyond the video's bottom border. Here's the code I'm using: .media-cover { display: inline-block; position: relative; } .media-cover:after ...

htmlcsshtml5-video

`<a> The value does not appear upon page load`

As a newcomer to development, I am currently experimenting and creating a sample dashboard. However, I am facing an issue where the sidebar value does not display upon loading the page. I have to manually click on a list in my sidebar for it to appear. Th ...

htmlcssbootstrap-4

Using PHP variables within the writeHTML() function in TCPDF

I'm attempting to include 3 different HTML strings in a PDF using TCPDF I have 3 variables that hold HTML strings. However, the code below only writes the value of $var3 to the PDF. Is there a way to display the values of all 3 variables in the PDF ...

phphtmlpdftcpdf

Always ensure that the horizontal scrollbar is visible without the need for vertical scrolling

I'm attempting to create a data grid-style layout where the left side is fixed and only the right side is scrollable. However, the entire div needs to be vertically scrollable. The concept is functioning correctly, but the horizontal scrollbar appears ...

htmlcssflexbox

css Repaint the CSS by filtering out list items with odd indexes

Having a list of over 20 items, I utilized the :nth-child(2n+1) selector to alternate the background color (even item in black, odd item in white). However, when using the jQuery Isotope plugin to filter out specific items by adding a .isotope-hidden class ...

jquerycssfiltercss-selectorsjquery-isotope

Horizontal alignment of Inline Block Elements is not achieved

Having trouble with the alignment of a form on a test site? Check out the form located under the div#search-bar. If you inspect the element, I have applied the following CSS: div.nf-field-container { width: 201px; display: inline-block; margin: ...

csswordpressinput

Guide on showcasing an alert notification when the data is already existing within an array through javascript

Need help with displaying an alert message in JavaScript for duplicate values in an array? var names = []; var nameInput = document.getElementById("txt1"); var messageBox = document.getElementById("display"); function insert() { names. ...

javascripthtmlcss

What is preventing me from adding a borderRadius to this particular React bootstrap tab?

I have been working on tabbed content and encountered an issue with applying border radius. Despite adding style={{borderRadius: "10px"}}, it seems to have no effect. This styling works perfectly everywhere else in my project, so I am puzzled as ...

javascriptcssreactjsbootstrap-4react-bootstrap