What is the best way to keep an image fixed at the top while scrolling, but have it disappear when the page reaches the footer?

I am in need of creating a unique Bootstrap 4 layout that involves an image staying fixed to the top after scrolling down until it reaches the bottom of the header. When the page is further scrolled down and the footer comes into view, the image should start scrolling again with the rest of the content. This sticky behavior is required only for large and extra-large Bootstrap 4 grids. I want the image to behave as if it had the "sticky-top" class from Bootstrap 4, but since browser support is lacking for this class, I am looking for a solution using CSS and jQuery. Is there a way to achieve this with jQuery?

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
   <header>The header sticks to the top</header>
    <div>Breadcrumbs that scroll along with the page go here</div>
    <div class="row">
  <div class="col-12 col-lg-6">
        <img src="image.jpg" class="img-fluid" alt="image">
      </div>
      <div class="col-12 col-lg-6">
      <p>Lots of random text goes here</p>
      </div>
</div>
    <footer>Footer content goes here</footer>

jquerycsstwitter-bootstrap

Answer №1

A nifty new tool has been developed to identify the current viewport in use right here:

Here's an example of how you can utilize this tool:

function checkOffset() {
if($('.img-fluid').offset().top + $('.img-fluid').height() 
                                       >= $('#footer').offset().top - 10)
    $('.img-fluid').css('position', 'absolute');
if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
    $('.img-fluid').css('position', 'fixed'); // restore when you scroll up
}

Make sure to only run the following code based on the detected viewport.

$(document).scroll(function() {
checkOffset();
});

When you get within 10px of the footer, the image will no longer scroll with the page. To bring it back into place, simply scroll back up.

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

Trouble with linkage in jQuery for AJAX requests in an external .js document

My asp.net application has a master file that includes the jquery.js file. On another page that uses this master page, I have my own jquery code. I attempted to move this code to an external file and then include it in my .aspx file. While most functions ...

javascriptjqueryasp.netajax

having difficulty configuring gwt-button's corners to be rounded

Hey there, I'm having an issue with a button in my GUI that I created using GWT. I'm trying to round the corners of the button, but using border-radius doesn't seem to have any effect on its appearance. The style sheet I'm using is "co ...

javahtmlcssgwtstylesheet

html interactive/expandable tree

I've come across this code which generates an HTML tree, but I'm facing an issue where the tree expands every time I refresh the page. What I want to achieve is to have certain branches expanded and others collapsed when the page is opened, depe ...

javascriptjqueryhtmlcss

Is it possible to incorporate a Material-UI theme palette color into a personalized React component?

My custom Sidebar component needs to have its background color set using Material-UI's primary palette color. Sidebar.js import styles from '../styles/Home.module.css'; export default function Sidebar() { return ( <div className={ ...

cssreactjsmaterial-uinext.jsjsx

Attempting to showcase two lines within a single row on an html page

Currently, I am working on a project involving ASP MVC and Bootstrap where I need to display the regulation of a transformer in a specific format. This representation can be seen in the image below: https://i.sstatic.net/VzVcA.png My attempt to achieve t ...

htmlcsshtml-table

Rotating elements with timed jQuery

I'm having trouble getting the selector to rotate at different intervals. I attempted using an if/else statement to make the first rotation occur after 3 seconds and subsequent rotations occur after 30 seconds. Unfortunately, it's rotating every ...

javascriptjqueryrotationjquery-tabs

Keep duplicating a single object until it fills up the entire screen

Is there a way to make an HTML/CSS element repeat until it covers the entire screen height, without repeating it indefinitely? #container{ height: 100vh; width: 100vw; } .dotts{ background-color: yellow; border-radius: 50%; height: 20px; width: 20p ...

javascriptjqueryhtmlcss

What are some creative ways to design nested flexboxes?

I'm currently working on creating a navigation bar using two nested flex boxes within one parent container. However, I'm facing difficulty in styling the inner flexbox without impacting the main container items. Here is how my layout is supposed ...

htmlcssflexbox

Maintain the border styling of a radio button when it is in the selected state

Having an issue with the radio type options - when selected, a blue border appears but disappears if clicking elsewhere. Need the blue border effect to stay even when clicked outside, unless switching to the other option. Looking to align the price in th ...

htmlcss

The error message InvalidCharacterError is displayed when the attempt to create a new element using the 'createElement' method on the 'Document' object fails. This is due to the tag name provided ('/static/media/tab1.fab25bc3.png') not being a valid name

Hey everyone! I'm new to using React and I decided to try cloning Netflix by following a tutorial on YouTube. However, I've encountered an issue with rendering an image in a functional component. The error message I'm receiving is as follow ...

javascriptcssreactjsimage

What is the best way to add new content to existing content?

My tag appears as follows <ul> <li data-newsid="1">News One</li> <li data-newsid="2">News Two</li> <li data-newsid="3">News Three</li> <li data-newsid="4">News Four</li> < ...

jqueryajax

Update and renew dropdownlist data with the help of jQuery

I am looking to enhance my drop-down list by dynamically adding data without having to refresh the page. Although I can currently add and view the data, it requires a manual page refresh. I am seeking a solution using jQuery to accomplish this seamlessly ...

jqueryasp.netajax

sending parameters to ajax method

I'm currently working on my first app and I'm having trouble passing values to an ajax function. Could someone please help me out with this? Here is the code snippet: In the HTML, there is a link that needs to pass a value, like "9": <a id= ...

javascriptjqueryajax

What is the process for implementing AJAX in Django to send a model object and save it in the database without the need to reload the page?

I'm currently working on a Django project where I have implemented a favorite button feature on one of the pages. The idea is that when a user clicks on the button, it should return the model object and store it in another database for reference. Howe ...

jqueryajaxdjangodjango-viewsdjango-ajax-selects

What is the best way to eliminate duplicate data from a JSON file?

In the code snippet below, there is a function that queries and retrieves data from a getjson. The issue at hand is how to filter out repeated results so that they do not appear. Is there a way to prevent duplicate data from being displayed? var cuit ...

javascriptjqueryjson

planning to append the author's name to the end of the title using CSS

Here is the HTML code I have: <div class='store_detail-level1'> <span class='book_name'>How To Avoid Climate Disaster</span> <br> <span class='author_name'>Bill Gates</span> < ...

css

Making an Ajax request in functions.php to identify the current WordPress page

I'm having trouble figuring out how to determine the current page within functions.php. I tried using if (is_home()) but it always returns false, even though I only want a specific ajax request to run on my homepage. When I check the current URI, it s ...

phpjqueryajaxwordpress

Creating floating images in AngularJS is a simple process that can add visual interest

As someone new to the world of AngularJS, I have been amazed by the stunning image animations on certain websites. I am eager to incorporate similar features into my own site. If anyone can offer guidance on how to achieve this, I would greatly appreciate ...

htmlangularjsimagecssjsp

AJAX jQuery requests can flatten arrays when they are sent

The below code shows an endpoint written in Express, using the body-parser middleware. app.post("/api/poll/new",api.NewPoll); api.NewPoll = function(req,res){ if(!req.body) return res.status(400).send("MISSING BODY"); console.log(req.body,typeof(r ...

javascriptjqueryajaxexpress

Is it possible to achieve Bootstrap 3-style for the mobile navbar menu in Bootstrap 4?

In the world of Bootstrap 4 https://i.sstatic.net/bMSOK.png Comparing to Bootstrap 3 https://i.sstatic.net/RVITm.png Seeking to replicate Bootstrap 3's menu in Bootstrap 4? This code snippet showcasing Bootstrap 4's menu can be found at : & ...

htmlcsstwitter-bootstraptwitter-bootstrap-4bootstrap-4