Problem encountered when trying to create a fixed position Sticky Div

I've attempted to create a sticky DIV using the code below, but it's not behaving as anticipated. The DIV sticks when I scroll down, but it overlaps with the website Header and Footer. How can I fix this issue using CSS/JS? Any assistance would be greatly appreciated. Thank you.

.a{
    float: left;
    width: 67%;
}
.b{
    width: 32%;
    float: right;
    position: fixed;
    right: 0;
}
.c{
    width: 100%;
}
<div class="c">
<div class="a">
-----
</div>
<div class="b">
-----
</div>
</div>

-----

javascripthtmljquerycss

Answer №1

Perhaps this is the solution you've been searching for. Simply scroll down the page to discover the sticky div. It might enhance your experience to run the snippet in full page view.

window.onscroll = function() {
  progress = document.getElementsByClassName('b')[0];
  let height = window.pageYOffset;
  if (height > 395) {
    progress.style.position = 'fixed';
    progress.style.top = `${20}px`;
  } else {
    progress.style.position = 'absolute';
    progress.style.top = `${400}px`;
  }
}
body {
  height: 300vh;
}

.b {
  width: 32%;
  position: absolute;
  top: 400px;
  background: darkcyan;
  height: 250px;
}
<div class="b"></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

The navigation bar in Bootstrap 3.2 expands in size as you scroll past it

Whenever I reach the bottom of the page, the navigation bar suddenly enlarges. The navbar is located at the top of my code. I attempted moving the navigation to the bottom of the code... but it didn't fix the issue... Could someone please identify wha ...

jquerycsshtmltwitter-bootstrap

What is the process of refreshing a page post-loading?

I'm working on a fundraising webpage and I want to display the live amount of money raised. Essentially, when one user donates while another is viewing the total amount raised, I want the displayed number to update in real-time. My backend setup incl ...

javascriptnode.jspush-notification

The parent element is not able to apply the CSS text-decoration in jQuery

Is there a way to retrieve a specific CSS property of an element, even if it is inherited from its parent? The standard jQuery method .css() can help with this. Consider the following HTML structure: <div id="container"> some text<br> ...

jquerycsstext-decorations

Tips for resetting the form input fields in Vue.js after the user has successfully submitted the form

I am facing an issue with my registration page. After the user enters some values and successfully submits the form, I want to clear all the fields. To achieve this, I am using a predefined function called reset() inside the script section. However, the ...

javascripthtmlcssvue.js

Tell me the permissions that a user possesses in discord.js

I need help creating a command using Discord.js that can display a user's permissions. For instance, the command could be $permissions @user and it should output something like: "User permissions within this guild: " I'm unsure if ...

javascriptnode.jsdiscorddiscord.js

Eliminating elements that adjust according to different screen sizes

Website: I am currently working on customizing a Tumblr theme I downloaded by removing some responsive elements. The rollover effects I created are being affected when the screen size goes below 1024px, and I am not happy with how it looks. Additionally, ...

csstumblr

Encountered an issue when attempting to insert data into MySQL using jQuery

Having some difficulties with jQuery and MySQL, specifically when trying to insert data into the database. Here is the code from my HTML file: <!DOCTYPE html> <html> <head> <title> Staff Registration </title> <body> < ...

phpjqueryhtmldebuggingmysqli

Styling hyperlinks upon exporting an HTML table to Excel

I am trying to export an HTML table to Excel using JavaScript by following the instructions provided in Export HTML table to Excel its downloading table contents to the Excel. However, I have encountered an issue where one of the columns in my table conta ...

javascripthtmlcss

Deactivate the button once it's been used | Discord.js version 14

In my index.js, I created a function to respond when a button is pressed and then disable it. client.on("interactionCreate", async (interaction) => { if (interaction.isButton()) { if (interaction.customId === "yes") { co ...

javascriptnode.jsdiscord.js

Can Firebase lists be reversed?

I have searched extensively on SO for an answer to this question, but I haven't found a solution yet. Therefore, please do not mark this as a duplicate. Currently, I am working with AngularFire in Angular 2 and Typescript. I am using FirebaseListObse ...

javascriptangularjsfirebasefirebase-realtime-databaseangularfire

onChange does not trigger useEffect

In the Order Content component, I am receiving some products as props to be used in a select component. When a product is selected in the dropdown, it triggers the rendering of Summary and Product components. In these components, the user can choose the ...

javascriptreactjs

Tips for sending multiple commands in ngrx/effect (redux-observable)?

In my Angular 6 project, I am using ngrx/store to manage state. I have an effect that handles updating data and based on certain conditions, I need to dispatch different actions. What will be the impact of using switchMap instead of map in this scenario? ...

javascriptangulartypescriptngrxngrx-store

Triggering an Ajax request by clicking on a link

In the scenario where you have a specific word on a webpage that you would like to trigger an onclick event and initiate an ajax request, what is the best approach to accomplish this? ...

javascripthtmlajax

Storing Jquery Nestable data in a MySQL database

https://github.com/dbushell/Nestable Using the source code provided by David Bushell, I aim to create nested lists that can be easily dragged and dropped for editing purposes. The database 'sortable' that I am working with consists of four colum ...

phpjquerymysql

Obtain the leaf nodes from a combination of arrays and objects using Lodash

Here is the code structure I want to share with you before explaining my requirements. It displays the input array layout along with the desired outcome: [ { link: "someurl", name: "Foo", subCats: [ { link: "anotherurl", ...

javascriptarraysobjectlodash

Having difficulty altering the font in the WordPress tinymce editor

I've been attempting to update the font in the WordPress tinymce editor, but I'm running into issues. First, I created a tinymce-custom-editor.css file with the following code: @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,7 ...

phpcsswordpresstinymce

Troubleshooting vague errors with uploading large files in Golang's net/http protocol

I've encountered a challenging error while uploading large files to a server built with Golang's default net/http package. The upload process is defined as follows: uploadForm.onsubmit = () => { const formData = new FormData(uploa ...

javascriptfilehttptypescriptgo

What methods are most effective when utilizing imports to bring in components?

Efficiency in Component Imports --Today, let's delve into the topic of efficiency when importing components. Let's compare 2 methods of importing components: Method 1: import { Accordion, Button, Modal } from 'react-bootstrap'; Meth ...

javascriptreactjsangularvue.jsnext.js

When working with the Google Sheets API, an error occurred: "this.http.put(...).map is not a valid

Having difficulty with a straightforward request to the Google Sheets API using the PUT method. I followed the syntax for http.put, but an error keeps popping up: this.http.put(...).map is not a function. Here's my code snippet: return this.http ...

javascriptangulargoogle-sheets-api

Unable to integrate the bootstrap Modal within an Angular 2 application

I am working on an Angular 2 app and I am trying to implement Bootstrap Modal windows. I have added the jquery and bootstrap.js files at the end of the body tag. Although the app loads without any errors, when I try to use the modal function in the console ...

jqueryangulartwitter-bootstrap-3bootstrap-modal