Sticky positioning and visible overflow restrictions

When position sticky is used within a container with overflow:hidden, it does not work as expected. However, the overflow hidden property is necessary in this case.

 <div class="lg:col-start-7 lg:col-end-13" style="overflow:hidden">
     <div style="min-height:100%;">
      <div class="bg-placeholder-bg w-full" style="position:relative">
          <img src="image:src" style="position: sticky;top: 10px;">
      </div>
     </div>
 </div>

EDIT: I just realized that everything is contained within another element that requires overflow:hidden, which is why position sticky is not working here. Anyone have any solutions?

htmlcssimageoverflowsticky

Answer №1

If you want to move forward, follow these steps:

#mainContent{
height:400vh;
width:100vw;
background-color:blue
overflow:hidden;
}
.container{
height:50vh;
background-color:red;
position:absolute
top:0;
left:0;
}
.bgContainer{
height:10vh;
width:100vw;
  position: -webkit-sticky;
  position: sticky;
  top:0;
}
.imgSticky{
height:100%;
width:100%;
background-image: url("https://cdn.shopify.com/s/files/1/0326/7189/t/65/assets/pf-e820b2e0--mother-tree-forest.jpg?v=1619557558");

  }
<div id="mainContent">

 <div>
 <div class="container">
      <div class="bgContainer">
         <div class="imgSticky"></div>
    
     </div>
 </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

Issues with Bootstrap's hamburger menu not functioning properly when clicked

Can't seem to get my hamburger button working. I've followed the bootstrap documentation and ensured that Bootstrap and jQuery are in the correct order, but still no luck. Any suggestions on what could be causing this issue? Are my links misplace ...

javascriptjqueryhtmlcsstwitter-bootstrap

additional one hour of generated report added >

My Select option code is causing some issues. When I view the uploaded data, there seems to be a duplication and an extra tag at the end: <option value="Running Request |Running > 1 hour">Running Request |Running > 1 hour</option> The ...

html

Tips on creating a blurred background effect when an HTML popup modal is activated

Whenever I click on a button, a popup window appears. What I want is for the background to be blurred when this popup modal opens. <div class="modal" id="myModal"> <div class="modal-dialog modal-lg"> <div class="modal-content"> ...

jqueryhtmlcss

How can I assign a value other than a string to a placeholder or vue property?

As I develop a content management system using Nuxt and Pug/Jade, I am looking for an efficient way to create a list of input fields for users to enter information. My idea is to use the v-for directive to render the list and dynamically set the value and ...

htmlvue.jsinputpugnuxt.js

How can you customize gutter widths for specific rows in Bootstrap 3?

Currently, I am constructing my own website using Bootstrap 3 and have come across a challenge that I would like to address: My goal is to assign distinctive gutter widths to certain rows in my design. The remaining sections of the site will adhere to th ...

htmlcsstwitter-bootstraprowtwitter-bootstrap-3

Add the variable's value to the input field

It is necessary for me to concatenate a numeric value, stored in a variable, with the input fields. For example: var number = 5; var text = $("#dropdown_id").val(); I wish to append the value of the variable 'number' to 'dropdown_id' ...

javascriptjqueryhtml

JavaScript Document Object Model: Locate an element with a class that is either similar to or includes a specific substring

I am facing a situation where I need to locate a wrapper element with a specific class name that includes a random id, such as wp-rgtayfu-fxyjzw-wrapper. The class will always have the substring wrapper in it, and there is only one element in the document ...

javascripthtmldomdocument

Encountering a JSON error while attempting to login through an API on the Ionic platform

While implementing the login functionality through API in Ionic, I encountered the following error: Error: Property 'json' does not exist on type '{}'. Below is my loginpage.html code: <ion-header> <ion-navbar> & ...

htmljsonangularionic-frameworkionic3

What is the best approach for resolving the issue of User having an Unknown field(s) (Id_card_number) specified in the system

I'm facing an issue with my code. Whenever I run a makemigrations command, it returns an error message saying Unknown field(s) (Id_card_number) specified for User. How can I resolve this problem? settings.py INSTALLED_APPS = [ 'django.contr ...

pythonhtmldjango

Tips for generating a JSON string with nested structure

Can someone assist me in generating a JSON based on the HTML elements provided below? { "AppName": "ERP", "ModuleDesc": [ { "Name": "Payroll", "AcCESSRIGHTS": [ { "Create": "Y", "Retrive": "Y", "U ...

javascriptjqueryhtml

Dynamic row Material-UI input field

Is there a way to create a multiline TextField component that expands to take full height on different devices? I am familiar with fullWidth, but is there an equivalent for setting the height of the component to full on rows depending on the device it is ...

cssreactjsmaterial-ui

Unlock the power of VueJS with advanced checkbox toggling for array data

I have encountered an issue while working with VueJS regarding the implementation of two features for a set of checkboxes. Initially, the checkboxes are generated dynamically. I am in need of a master 'toggle' checkbox that can toggle the stat ...

javascripthtmlarraysvue.js

Is there a way to adjust the padding temporarily?

Important Note: Despite the misleading title of my question, it doesn't accurately reflect my actual query (sort of). Below is the code snippet in question: .one{ background-color: gray; } .two{ padding: 20px; } <div class = "one"> < ...

javascriptjqueryhtmlcssuser-interface

Transferring information from JSON to HTML

Recently, I came across this handy design tool within our service that helps generate Gauge charts by simply adding a specific div class to the desired pages. <div class="gauge" id="g0" data-settings=' { "value": ...

javascripthtmljson

What is the best way to incorporate bullet points into a textarea?

How can I make a bullet point appear when pressing the 'enter' button inside a textarea? I tried using this code, but it doesn't seem to work. Any suggestions? <script> $(".todolist").focus(function() { if(document.getElementById( ...

javascriptjqueryhtml

Protection of Angular expressions

I have been following the PhoneCat tutorial for AngularJS and found it very helpful up until step 6 where links are generated dynamically from angular expressions: http://localhost:8000/app/{{phone.imageUrl}} Although the tutorial mentions that ngSrc pre ...

javascripthtmlangularjssecurityexpression

Adjust the text orientation using CSS within an SVG element

Here is the SVG code snippet that I am working with: https://jsfiddle.net/danpan/m3ofzrc1/. It generates the image shown below. The image consists of two lines of text wrapped around a circle: HELLO_WORLD_1 HELLO_WORLD_2 I want to change the direction ...

htmlcsssvgcss-animations

Swap the Text for a Button

I've been searching for a solution to this problem, but all I seem to find online is advice on how to "replace button text." What I'm trying to achieve is to have text change into a button when hovered over. I've attempted using fadeIn/fade ...

javascriptjqueryhtmlcss

The image fails to appear

Check out my website at www.wostokhr.pl I am having trouble getting the picture "pics/hero.jpg" to show up in the "div id="hero"" section with a JS parallax function. I have double-checked the HTML and CSS validators and everything seems to be correct. An ...

htmlcss

"The combination of Windows, @font-face, and Cyrillic characters presents a

I am encountering an issue with font-face and Cyrillic characters. The fonts display properly in any browser on OS X, but fail to render on a Windows 7 machine (chrome, ie etc). Even after putting the fonts through Font Squirrel and testing the demo files ...

htmlcsswindowsfont-facewebfonts