Ensure that the floating div is positioned along the right side and adjusts to accommodate the

I've been searching for a solution to this issue, but it seems like I might not be articulating it correctly because I haven't been able to find an answer yet.

On my page, there is a 'quick links' button that is supposed to stay fixed on the right side of the screen while scrolling.

To achieve this effect, I have used the following CSS code (the right attribute is used to hide the menu that appears when the element is clicked on):

#quickLinks {
    position: fixed;
    display: block;
    top: 50%;
    z-index: 2;
    right: -250px;
}

While this setup works well, I am having trouble adjusting for the presence or absence of a scroll bar.

So I added some padding to the right attribute to account for the scroll bar's appearance (which is generally present on my page), but this creates unnecessary space when there is no scroll bar visible on devices like an iPad.

I noticed that using 'absolute' instead of 'fixed' fixes the hugging effect issue, but then the floating scroll functionality is lost.

If anyone has any ideas or suggestions, I would greatly appreciate it. :)

Thank you!

htmlcss

Answer №1

It appears that there may be a conflicting CSS rule causing the issue you are experiencing. Sharing your CSS file could help identify and resolve the problem. Testing this scenario with a simple fiddle across various browsers yields the same outcome - a slight leftward movement of the fixed div when a scroll bar is present. To observe the difference, try reducing the amount of Lorem Ipsum text.

.right {
  background: blue;
  padding: 20px;
  position: fixed;
  right: 0;
  top: 100px
}
<div class="content">
  <p>Lorem ipsum dolor sit amet... lots more Lorem Ipsum text here...</p>
</div>
<div class="right">
  I'm floating on the right!
</div>

https://jsfiddle.net/uy1tgdew/2/

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

Learning to extract information from a JSON file with various key and value combinations

I am facing a challenge with my JSON data file, which contains UserIDs as keys and Passwords as values. My goal is to use JavaScript for validation by reading this JSON file. The structure of my JSON is as follows: IDsNPass = '[{"A":"A15"},{"B":"B15" ...

javascripthtmljson

Which specific divs should I assign an ID to within the class?

Is there a way to apply the gray box style to specific divs instead of all of them? Should I include an id somewhere in the code? <!DOCTYPE html> <html> <head> <style> div { width: 320px; padding: 10px; border: 5px soli ...

htmlcss

Is it possible to adjust the font size in Bootstrap 4.6.2 to fit smaller fonts and bring back color to the tabs that were removed in the update?

While attempting to update Bootstrap from version 4.6.0 to 4.6.2 in a few codebases, I encountered some issues that prevented me from completing the upgrade successfully. The <small> tag and .small CSS class are now displaying larger than before. Ta ...

csstwitter-bootstrapbootstrap-4

Employing Bootstrap, incorporate a vertical divider in the center to split three icons on the left and three icons on the right, all while ensuring the design remains responsive

I have been struggling with a layout issue for the past couple of days and I am in need of assistance from someone who can help me. Unfortunately, I am unable to upload an image here as I am new and do not yet have enough reputation points. The Layout Str ...

htmlcsstwitter-bootstrap

Adjusting color with the .on method in Event Listener

What's wrong with this code? html <!DOCTYPE html> <html> <head> <title>Ending Project</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> &l ...

javascripthtmljqueryjquery-events

Error occurs when resizing SVG icon

Having some environmental constraints, I have resized this 16x16 icon to 13.4x16, but it appears blurry. Despite my understanding of SVG and setting the preserveAspectRatio attribute, the resizing does not work as expected. Can anyone point out what I migh ...

htmlcsssvg

Adjust the text color when hovering with the style tag

When it comes to customizing the color of a link on hover, CSS makes it simple with code like this: .myId:hover{ color:green; } But what if you're using inline styles? Is there a way to achieve the same effect without just plain HTML and CSS? & ...

htmlcsshover

Adjusting the layering of a nested element within a container div using

I am facing an issue with two buttons placed within a container div that is being overlapped by another container div. The bottom container overlaps the top one, rendering the buttons unclickable. I have been trying to find a solution to make the buttons ...

htmlcss

What is the process for creating two columns with an input box beneath them?

I am facing a challenge with my code. I am struggling to create the desired design where there are two columns and below them an input box that will be displayed when a button is pressed. The design I am aiming for can be viewed here: enter image descripti ...

javascripthtmlcss

Ways to verify the user's authentication status on the server end

Before displaying an HTML page, I need to verify user authentication. Here is a snippet from my server.js: const express = require('express'); var jquery = require('jquery'); var admin = require("firebase"); const app = expre ...

javascripthtmlexpressfirebase-authentication

Elements are not detected after applying display:none

Within the onLoad event, I implemented a function to hide multiple div elements by setting their CSS property display to "none" and assigning them the class name "invisible": function hideContent() { laElements = document.getElementById("content").chil ...

javascripthtmlcssdom

Unable to modify variable to play audio

As I work on constructing my website, I am incorporating various sounds to enhance user experience when interacting with buttons and other elements. However, managing multiple audio files has proven challenging, as overlapping sounds often result in no aud ...

javascripthtmlaudiovar

What is the process for accessing an image via localhost on the same computer?

I created a program that saves images locally and stores their URLs in a database. When retrieving this data via ajax, the URLs are fetched and appended to a div class using the following code: $( document ).ready(function() { $.ajax({ url: "/ ...

jqueryhtmlimage

Calculating available balance by subtracting the entered amount from the existing balance in Python Django

In the user profile model within my Django project, there are fields for available balance and current balance. I am looking to deduct an input amount from the current balance in order to display the updated available balance on the user's web page. ...

pythonhtmldjangodjango-models

Refresh the CSS inheritance and hover effects

Facing an issue with my web project where I am using CSS. At times, I need to reset the inheritance from the parent class for certain elements. Although I have defined some classes to style my elements, I want to completely reset all styles except for hove ...

htmlcsshover

What is the process for verifying an md-select in Angular Material 2?

Hello everyone. I am currently building an app using Angular and incorporating Angular Material for the UI design. I am familiar with Angular validation techniques. For more information on form validation in Angular, you can visit this link. My questio ...

htmlangularvalidationinputangular-material2

CSS: Overlapping two divs with unique classes and varying margins - Unexpected occurrence or intentional design?

One thing I'm curious about: Will the margins of two different divs merge if they have the same value when intersecting? It appears so! Do paddings not merge when two different divs intersect, even if they have the same value? It seems that way! When ...

css

Ways to format the initial letter of a word as BOLD

Looking to make the first letter of certain words bold on a button in my UI that says, "Active Engagement" and "Active Non-Engagement". How can this be achieved? For example: Active Engagement, Active Non-Engagement The code for the buttons is as follows ...

androidhtmlbutton

Loading a .css file in advance using NextJS

We have integrated NextJS and Material-UI into our website, but we are facing an issue with FOUC (Flash of Unstyled Content) upon page loading. After some investigation, I discovered that the JS files are loading faster than the CSS file, causing the probl ...

javascripthtmlcssnext.js

What is the method to establish the table format in HTML using several for each loops?

I need to arrange the table structure for product plans as follows: +------------------+---------------+---------------+ | product1 | product2 | product3 | +------------------+---------------+---------------+ | product1plan1 | product ...

phpcsshtmlcakephp