Modify the div from fixed position to static

Is there a way to prevent the div with the class fixed from staying fixed at the bottom after scrolling over it?

I stumbled upon a solution thanks to the comments below.

This is my current JavaScript code:

var element = $(".below");
window.onscroll = function(ev) {
   var a = element.position(); 
    if (a.top <= window.scrollY + window.innerHeight) {
        $("fixed").css('position', 'static');
    } else{
       $("fixed").css('position', 'fixed');
   }
};

This is my current HTML markup:

<header>
</header>
<section>
  Some html and text here here
</section>
<section class="fixed" style="position: fixed; width: 100%; bottom: 0;">
  text
</section>
<section class="below">
</section>
<footer>
</footer>

Is there a better way to achieve this?

jqueryhtmlcss

Answer №1

To implement scroll detection like the example, you can refer to this resource: 

var element = document.querySelector(".fixed");
window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        element.style.position = 'absolute';
    }
};
<header>
</header>
<section style="position:relative">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus arcu eget metus consequat fermentum. Morbi mattis, ante ut luctus interdum, dui purus ultrices enim, ut egestas ipsum felis eget nisl. Cras id mauris eget turpis hendrerit tristique. Suspendisse quis orci neque. Morbi auctor neque vitae elit facilisis, ut aliquam augue viverra. Proin porta magna vitae turpis ornare dignissim. Suspendisse at eros faucibus, eleifend nibh a, mollis risus. Nam sit amet ex leo. Duis turpis arcu, commodo non gravida id, ornare...

Quisque venenatis convallis lacus, ac fermentum lectus. Fusce mollis nibh sit amet ante ornare, eu mattis augue porttitor. Nulla nibh justo, suscipit eu dui ac, porttitor molestie lacus. Curabitur sed auctor massa. In rutrum eu neque non vestibulum. Mauris pellentesque, dolor id gravida gravida, magna nibh malesuada dolor, et auctor orci est eu velit. Phasellus volutpat, turpis non faucibus cursus, elit augue tincidunt lacus, quis dictum elit mauris eu lorem. Vivamus volutpat convallis volutpat. Sed luctus ipsum ante, eu varius augue dictum ac. Proin sit amet elit accumsan, tincidunt tellus non, lobortis tellus.

Sed eu metus id est efficitur varius. Donec sagittis venenatis justo, vitae egestas arcu lacinia quis. Sed volutpat mollis porta. Integer id molestie felis, id venenatis felis. Praesent ullamcorper lorem in dapibus dapibus. Nunc non urna nec nisi sollicitudin posuere. Cras non ex metus.
<li>...</li>

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

Fluidly Floating and Steadfastly Sized Element

Creating a 4-column Panel Bar Layout with Specific Conditions: #c1, #c2 = fixed width #c3 autofill with remaining width #c4 auto width (adjusts based on content) corresponding to #c3 Requirements: Float #c4 to the right instead of absolute positionin ...

htmlcsscss-floatfixed-widthvariable-width

Enhance your horizontal stacked bar chart in chart.js by incorporating inner labels with the help of the 'chartjs-plugin-labels' plugin

Currently, I have integrated a package that allows me to incorporate labels into my charts - import * as pluginDataLabels from "chartjs-plugin-labels"; While it works perfectly fine with line charts, pie charts, and normal bar charts, I am facin ...

javascripthtmlcsschartsstacked-chart

Submitting a form in a jQuery Mobile native application to redirect to a different page

I am embarking on my inaugural attempt at developing a native mobile application using jQuery Mobile, which will subsequently be wrapped in PhoneGap. Although I am new to the world of mobile application development, I am currently facing a minor roadblock. ...

phpmysqlcsshtmljquery-mobile

Using jQuery to toggle between two elements and updating the SELECT field

<div class="r_row"> <div class="row field_currency"> <div class="f_row"><label class="" for="currency">Currency</label></div> <div class="r_row"> <select id="currency" name="currency" class=" select ...

javascriptjqueryhtmlcss

Require assistance in getting a slider operational

Hello there! I could really use your assistance with this code. I have been trying to make it work using JavaScript, but I'm determined not to incorporate any external JS files. Here is the snippet of JavaScript code I am working with: "use strict"; ...

javascriptjquerycss

Having trouble with Jquery version 1.5 and the $.load function not functioning

Try running the following code snippet: $('body').load('test.html'); ...

jquerydialogjquery-1.5

Looking to showcase your logo prominently at the center of the page, flanked by two elegant

Is it possible to create a grid-like structure with dimensions 5.5-1-5.5? I would like to center a logo on the page with two lines on the left and right. (Please excuse my limited English skills) https://i.sstatic.net/cgjfS.png ...

htmltwitter-bootstrapcss

jQuery Popup Button - Maintain the Current Design

I'm currently working with a jQuery dialog and trying to make one of the buttons appear and function as a default button, while still keeping focus on form elements. I managed to achieve this using the code below. However, I encountered an issue where ...

jquerybuttondialogdefault

What are some ways to create a responsive Grid in React JS with the help of Bootstrap?

Utilizing bootstrap in my react js project, I am implementing css grid to showcase some cards. However, I am encountering responsiveness issues. import React from "react"; import "./Project.css"; export const Project = () => { return ( <div& ...

cssreactjsbootstrap-4

Is there a way to make a Bootstrap grid with four columns span across two rows in the second column?

How can I create a Bootstrap grid with four columns where the second column spans two rows? Hello, I am looking for help to achieve a portfolio grid layout with 4 columns (refer image here) and have the second column span 2 rows. I plan to include images ...

jqueryhtmlcsstwitter-bootstrapportfolio

Concealing a button within a specific interface

I am currently facing an issue with a data table that includes two control buttons: edit and save. My problem lies in hiding the save button on the initial preview. Basically, what I want to achieve is displaying only the Edit button on the first page. Wh ...

javascriptjqueryhtmlajax

Having trouble adjusting the width and height of images to a full 100% scale

I'm currently working on an Angular and Bootstrap application where I am trying to integrate a Bootstrap carousel. However, I've encountered some resizing issues with the width and height of the images/graphs. You can view a demo of the issue he ...

javascripthtmlcssangularjstwitter-bootstrap

utilizing the power of Ajax in Laravel version 5.7

I am seeking assistance in utilizing AJAX to delete and update table rows with a modal in Laravel 5.7. I am new to AJAX and would appreciate any help, especially in explaining how AJAX sends/gets data in the controller and if there are any differences betw ...

phpjqueryhtmlajaxlaravel

Guide for positioning all navbar items except one to the left, beginning at the left edge, utilizing a set minimum and maximum width, while moving the final item to the right edge

Is there a way to align all items in a navbar except for one to the left, with a fixed combined minimum and maximum width of 300px-400px, while sending the last item to the right margin? I want the final result to resemble this: https://i.stack.imgur.com ...

htmlcss

Using the download attribute with anchor tags in React components

I utilize cloud storage to store my files, and during the upload process, they receive unique prefixes in their names. For instance, if I upload a file called test.txt, it will be saved as 7ea205f01ae5_test.txt. It's worth mentioning that I also captu ...

htmlreactjs

Is there a way to identify the visible portion of the browser window as seen by the user?

Looking at the image below, you'll notice that the website displays elements "A", "B", "C", "D", and "E". However, users may only see elements "A", "B", and a small portion of element "D" within their browser window. Some users may need to scroll down ...

javascripthtml

Create code with a form button and showcase the produced code on the webpage

I have created two files: code_generator.html, which takes input in the form of an image URL and landing URL. When I click on the submit button, it calls code_created.php. <html> <head> </head> <body> <form a ...

phphtml

Inserting HTML code into the polymer

This is my HTML code: <div id="setImgWrap"> <!-- The appended image will be displayed here --> </div> Here I am appending an image from JavaScript: this.addedImages = { imageURL:self.downloadURL }; this.$.setImgWrap.append('& ...

javascriptjquerypolymeriron

Animating with JavaScript

I have a members button on my website that triggers a dropdown animation when clicked. However, the issue is that the animation occurs every time a page is loaded, even if the button is not clicked. I want the dropdown to only open when the button is click ...

javascriptjqueryhtmlanimation

In Chrome, the computed style of background-position is returned as 0% 0%

Let's say I have an element and I am interested in finding out its background-position: To achieve this, I use the following code snippet: window.getComputedStyle(element).getPropertyValue('background-position') If the value of background ...

javascripthtmlcss