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

Display list items in HTML based on the length of an array

In my backend, I have a user-defined array of cars. If the user selects 3 cars, the array will contain 3 elements. I would like to display specific details of the cars in HTML elements within a list. The array is based on JavaScript. Here is an example of ...

Is it possible to limit the values of parameters with react-router?

Currently, I am in the process of developing a website using react and react-router. I have two different types of routes set up, as shown below: <Route name="products" path="/:type/*" handler={ ProductList } /> <Route name="generic-template" p ...

When a base html tag is dynamically added, the browser mistakenly loads assets twice

When managing relative paths on a website, I utilize the <base> tag within the <head> section of each page. Although all resources loaded via relative-like paths in the documents are displayed correctly, my observations show that browsers such ...

Aligning content within a div block

I created a div block that houses a form structured like this: <div class="divClass"> <form id="frm" method="post" action="/NotDefinedYet/index.xhtml" class="frmClass"> <input type="text" name="j_idt9:j_idt10:Username" placehold ...

What is the best way to arrange three identical boxes next to each other, all of the same size

Imagine having a container with the following dimensions: .container { width: 960px; margin: 0 auto; height: 500px; } Now, envision wanting to add three boxes in the center aligned horizontally with these specifications: .box1 { background-color ...

Guide on integrating buefy (a vue.js component library) into your Laravel blade template

I'm currently integrating buefy into my project, but I'm encountering issues with using vue.js on Laravel 5.8. Can anyone offer assistance? Here is the code snippet from my app.js: require('./bootstrap'); window.Vue = require('v ...

Receiving HTTP POST data using Classic ASP script

I'm currently working on a project and have come across an area where I am facing some challenges. Despite my best efforts, I haven't been able to find a solution using Google. In my ASP web application, I've added an HTML canvas that I nee ...

Identifying geometric coordinates within Canvas

Currently, I am adding drag and drop functionality to my HTML5 Canvas application. I have encountered a challenge in determining how to detect if the shape being clicked on is not a rectangle or square. For instance, within my 'mousedown' event h ...

Error in installing npm package.json using npm init -y

After installing node.js specifically for Sass compiling, I found myself facing a challenge due to my lack of familiarity with JavaScript. When I entered the npm init -y command in VScode terminal, it generated a package.json file with a "debug" property b ...

Issue: (SystemJS) Unable to find solutions for all parameters in $WebSocket: ([object Object], [object Object], ?)

Upon running the code snippet below, an error is thrown: Error: (SystemJS) Can't resolve all parameters for $WebSocket: ([object Object], [object Object], ?). app.component.ts import { Component } from '@angular/core'; import {$WebSocket} ...

Creating a contact page with Font Awesome icons similar to my design using Flexbox in CSS

How can I achieve the desired layout for this image? I have written some code and applied CSS to get the output, but I encountered an issue. When the text in my address section is too large, the icon gets misaligned and collapses. How can I fix this issue ...

Items are overflowing the flex container, exceeding its boundaries

I've experimented with the width property, flex, flex-basis, and flex-shrink, but so far nothing seems to be working. I can't seem to pinpoint where the mistake lies in the code. I wanted to include the code snippet here, but it's throwing ...

Use jQuery to apply CSS to a div only when it becomes visible on the screen

I created a single page HTML with scrolling functionality. The structure of my divs - home and home2 - is as shown below. Both have a height of 100%. I am looking to add CSS to the second div (home2) using jQuery only when it becomes visible to the user in ...

Updating a MongoDB document using only the data from checked checkboxes

Imagine having data structured like this: _id:60e2edf7014df85fd8b6e073 routineName:"test" username: "tester" monday:[{ _id: 60e430d45395d73bf41c7be8 exercise: "a" }{ _id: 60e4329592e ...

"Exploring ways to pass live data from the controller to the view in CodeIgniter for dynamic chart values

I currently have the following code where I am statically assigning values. Now, I need to dynamically retrieve values and display a chart. I want to populate the 'items' variable from the controller in the same format, and then display the chart ...

Unable to concatenate values from Object in JavaScript

Although it may seem trivial, the following code is giving me trouble: window.temp1.targetInterests It gives me back: Object {Famosos: "Famosos", Musica: "Música", Humor: "Humor"} I attempted to join it: window.temp1.targetInterests.join('/&apos ...

When using AngularJS filter, the comparator will evaluate to true and display the ng-repeat list even when the input

Recently, I stumbled upon this interesting example fiddle showcasing the use of a comparator parameter to filter exact matches: http://jsfiddle.net/api/post/library/pure/ The priority is supposed to be a number between 1-100, but due to inputting it as t ...

What is the best way to handle texture loading delays in Three.js when using a JSON model?

Currently, I have successfully loaded a JSON model based on AlteredQualia's skinning example. However, I am looking to hide the model until it is fully loaded. In the provided example, the models are displayed before their texture resources finish loa ...

Using Node.js and Typescript to bring in external modules from

Attempting to generate a random integer between 1 and 6 using the 'random' library. Here's what I have coded so far: import random from 'random' function rollDice(min:number, max:number) { return Math.floor(Math.random() * (ma ...

How can I design DIVs to resemble a radio station or television schedule grid?

Check out the JSFiddle for my page with the source code included: https://jsfiddle.net/g0kw1Le8/ Here is a snippet of the source code: <TITLE>Hallam FM - Best Variety of Hits</TITLE> <style> /* CSS styles go here */ /* End of CSS */ & ...