Is it possible for a div with fixed position to still have scrolling functionality

My fixed positioned div (#stoerer) appears to be moving while scrolling, although it is just an optical illusion. Check out this visual explanation: view gif for clarification

Below is the code snippet in question:

<div id="stoerer">
   <button class="closed"><i class="fa fa-times" aria-hidden="true"></i></button>
   <h1>OSTERSPECIAL!</h1>
   <h2>EINMALIGE ANGEBOT ZU OSTERN</h2>
   <a href="<?= BASEURL ?>angebote"><i class="fa fa-angle-double-left" aria-hidden="true"></i> Learn more</a>
</div>

#stoerer {
    //display: none;
    position: fixed;
    right: 0;
    top: 15%;
    @include box_shadow(4);
    width: 350px;
    background: $mvBlue;
    padding: 20px;
    z-index: 999;
}

Answer №1

After some investigation, I discovered the root cause of the issue was a parent div with the CSS property -webkit-perspective: 1000;. Once I removed this property, everything started working correctly. Thanks to everyone for their helpful comments!

Answer №2

Your div is working fine with position:fixed. The issue you are facing is likely in another part of your code. Take a look at the snippet below for an example of how position:fixed should work and adjust your code accordingly:

#stoerer {
    position: fixed;
    right: 0;
    top: 15%;
    width: 350px;
    background: blue;
    padding: 20px;
    z-index: 999;
}
<div id="stoerer">
   <button class="closed">
    <i class="fa fa-times" aria-hidden="true"></i>
   </button>
   <h1>OSTERSPECIAL!</h1>
   <h2>EINMALIGE ANGEBOT ZU OSTERN</h2>
   <a href="<?= BASEURL ?>angebote"><i class="fa fa-angle-double-left" aria-hidden="true"></i> Erfahre mehr</a>
</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

What about a lightbox with enhanced jQuery features?

As a newcomer to jQuery, I've never experimented with lightboxes before. However, I was tasked with creating something fun for April Fools' Day at work. Naively, I accepted the challenge thinking it would be simple, but now I find myself struggli ...

What is the reason that styled() does not apply styles to the Material-UI <TextField /> component?

I've managed to figure out a solution, but I'm curious about why this code is working: <TextField label='Zip Code' size='small' InputProps={{ style: { borderRadius: '.4rem' }, }} sx={{ width: & ...

Tips for aligning 2 divs in the same position?

I am working on a slider feature that includes both videos and pictures. I need to ensure that the videos are hidden when the device width exceeds 600px. Here is the HTML code snippet: <video class="player__video" width="506" height="506" muted preloa ...

The problem with -webkit-center in HTML

I have encountered an issue with some code that I wrote. When utilizing -webkit-center and entering text into a textbox, all the items shift to the right. I have attempted other -webkit alignment settings without any problems, only -webkit-center seems to ...

Tips for verifying the presence of a 3D model from Spline API within the DOM using Next.js

I am in the process of developing a brand new website and I have integrated a 3D model from spline, although it is taking quite some time to load. To improve user experience, I decided to implement a loader/Spinner. However, I'm facing the challenge o ...

Guide on NodeJS: Harnessing the power of nested functions to ensure synchronous execution

Imagine two functions, A and B, both interacting with a MySQL database using connection.query(...) methods. Function A utilizes a while loop to navigate through the response it receives. Subsequently, function B is invoked with the response from function ...

Displaying cards horizontally on desktop and vertically on mobile using CSS

Context and Issue I am currently working on this specific page, with a focus on the "Top Artists" section. Desired Outcome: When viewed from a laptop, I aim for the cards to be displayed as vertical rectangles, where the ranking is at the top, followe ...

Having trouble obtaining data from the database and showing it on the webpage

I am encountering an issue with displaying content from a database named resources and a table within it also named resources. The code snippet causing trouble is as follows: mysql_connect('localhost', 'username', 'password', ...

What is the best way to make a div expand to the full width of the screen while still being contained within its parent div?

I am facing an issue with the black bar at the bottom of the slider not stretching full-width on the screen. While it works fine on the left, the right side is cut off at the container edge. I am using Master Slider if that's relevant information. Can ...

When adding my Angular web app to the home screen on iOS Safari, the icon appears as a screenshot instead of the specified apple-touch-icon

Despite adding an apple-touch-icon link to my index.html with a 150x150 PNG image, when I try to add my Angular web app as a shortcut to my iOS home screen from Safari, it only appears as a screenshot of the app page. Below is my HTML code: <!doctype ...

What is the best method for adding a line break in the body of an email when we include the recipient, subject, and message?

Do you have a requirement where information needs to be sent to an end user via Gmail (preferred) and they need to click on a button in the email body to respond? The button response is set up with predefined to, subject, and body fields, but there are dif ...

Insert a numerical value into a list to make a series of numbers whole

I currently have an array of objects that looks like this: var arr = [ { "code": "10", }, { "code": "14", } ] My goal is to expand this array to contain 5 elements. The numbers should ran ...

Searching and manipulating arrays in PHP

<?php include 'database.php'; $sql="SELECT `j_company`,`j_salary`,`j_title` FROM `jobs`"; $query=mysqli_query($conn, $sql); if(!$query) { echo "<h1>Unsuccessful</h1>"; echo("Error description: " . ...

Struggling to make the javascript function compatible with the drop-down menu

I'm encountering issues with making my JavaScript work properly alongside my HTML. Specifically, I want the "activity" drop-down box to function in conjunction with the "city" drop-down box. For instance, if I choose "Brisbane" and then select an acti ...

Adjust the position of the IMG to the left side

Struggling with some code and need some assistance: <script> function run() { document.getElementById("srt").value = document.getElementById("Ultra").value; } </script> <script> function ru ...

The value of a variable remains constant even when it is assigned within a function

I developed a dynamic image slideshow using HTML and JS specifically for the Lively Wallpaper app. This app offers various customization options, which are stored in the LivelyProperties.json file along with input types such as sliders and text boxes. To ...

Using a JavaScript if statement to check the height of a specific HTML element

I have been struggling to figure out how to insert an if-else statement in JavaScript that references data about an HTML element. My objective is to create an "onclick" function that enlarges an image with a 200ms delay and another function that returns th ...

Unread elements

I have generated a dynamic list of pages using JSON and have displayed them in a . However, the elements created by the for loop do not seem to be accessible to JavaScript or CSS. For instance, the links within the for loop should be converted into buttons ...

Choosing a radio button based on the stored value within a variable

When transferring a variable (active) from my route to EJS, I initially found it easy to simply display its value: <!-- Active Text Input--> <div class="form-outline mb-4"> <label for="active" class="form-label">Active</label> ...

Having trouble establishing a connection to MySQL through NodeJS and Express

I am currently attempting to establish a connection to MySQL using a nodeJS app with express as the server. I have referred to the mysql npm documentation to start the connection process, but I keep encountering an error in the callback function within cre ...