Fixed div banner when scrolling to top

I am looking to create a unique UI behavior where there is a responsive content followed by a section with a background image that scrolls along with the page until it reaches the top and then freezes. I have searched for similar solutions but haven't found exactly what I need.

Unlike using a fixed background image at the top left, I want the image to start below the top of the page.

This question on Stack Overflow got me started in the right direction:
How can I make a div stick to the top of the screen once it's been scrolled to?

I also came across this fiddle which has some elements of what I'm trying to achieve, but I've hit a roadblock in my progress. (I may have unintentionally disrupted the code while experimenting. Imagine the big red box as the background image.)
http://fiddle.jshell.net/5y2b4xoL/

In essence, I want the background image to scroll alongside the page until it reaches the top, at which point it becomes fixed.

Any assistance would be greatly appreciated.

cssbackgroundsticky-footer

Answer №1

Utilizing jQuery scroll() allows for the element to stick as it's scrolled by adjusting its position,

View the code snippet below:

$(window).scroll(function() {
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = 155;
    // set to your desired position

    if (y_scroll_pos > scroll_pos_test) {
        $("#scroller").css("position", "fixed");
        $("#scroller").css("top", "0");

    } else {
        $("#scroller").css("position", "relative");
        $("#scroller").css("top", "auto");
    }
});
body {
    min-height: 1400px;
    background: yellow;
    margin: 0;
}
h1 {
    margin-bottom: 100px;
}
#scroller {
    background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Scroller demo</h1>
<div id="scroller-anchor"></div>
<div id="scroller">
    [Insert Your Content Here]
  </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

Limiting the height of a Bootstrap 4 column to match another column's height: A simple guide

I currently have a layout with two columns in a row. The left column has a fixed height determined by its content (height:auto), while the right column is longer and may overflow once it reaches the height of the left column. How can I make sure the right ...

htmlcssbootstrap-4angular-ui-bootstrap

Tips on using the Hover property in CSS for an element that includes both :after and :before properties

I've created a hexagon using CSS after and before properties, and now I'm attempting to add a glowing effect around the hexagon when hovering. It works perfectly for the center of the hexagon but not for the top and bottom points of the shape. ...

htmlcss

Switch between visibility of objects with toggle button

I have set a background image on the body, and positioned a large box, footer, navigation bar, and header above it. In order to add functionality to slide these elements up and down, I've created two buttons with classes 'slideUp' and &apos ...

javascriptjqueryhtmlcss

Is using 'box-sizing: borderbox' enough to avoid horizontal scrolling?

Currently undertaking The Odin Project, my task was to replicate the Google homepage. However, I have encountered a challenge that I am struggling to resolve. I attempted to use box-sizing: border-box; to prevent the page from extending beyond the width ...

htmlcsswidescreen

When my webpage is opened in Firefox, I notice that it automatically scrolls down upon loading

I recently embarked on the task of building a website from scratch but ran into an unusual bug in Firefox. The issue causes the page to scroll down to the first div, completely bypassing its margin. I want to clarify that I am not seeking a solution spe ...

javascripthtmlcssfirefox

The addClass method in jQuery is failing to append the specified class to the element

I'm currently working on a registration form that includes selecting your gender: My goal is to have the male icon turn blue when clicked, and the female icon turn pink. The color change currently works when hovering, but not when clicked. Here is th ...

javascriptjqueryhtmlcss

How can I combine HTML and CSS in a single request using the sendFile method in Express?

const app = require('express')(); app.get('/', function(req, res) { res.sendFile(__dirname + "/" + "index.html"); }); <link rel="stylesheet" href="style.css"> I utilized the Node.js code above to send an HTML file. In order to ...

htmlcssnode.jsexpresssendfile

My presentations are not functioning as expected, could there be a problem with my HTML, CSS, or JavaScript coding?

My website utilizes a Slideshow feature to display images for blog posts. Recently, I attempted to include multiple slideshows within an article, which unfortunately caused all of the slideshows to malfunction. As it stands now, when the code is executed, ...

javascripthtmljquerycss

Creating a Three-Row Table with Material-UI and React

I am looking to achieve a layout similar to the one shown in the image below: I want to construct a table with three rows, where the third row is positioned below the first and second rows, and the width of the third row is equal to the combined width of t ...

htmlcssreactjsmaterial-ui

What causes the extra gap above an element even when there seems to be no margin or padding applied to it?

I can't seem to figure out why there is extra space above the elements in my nav bar. I've checked the margin and padding, but there is a large gap above my #logo and #searchbox that is causing layout issues. How can I remove the space above thes ...

htmlcssmarginpadding

Relocate the Bootstrap selector box form to align with the left side of the page

I have included the Bootstrap CDN in my project, and I am encountering an issue with a form that contains a dropdown box. The problem is that the legend tag is properly aligned to the left of the page, but the selector box is slightly indented towards th ...

cssbootstrap-4

Tips for triggering animation only when the element is in the viewport

I'm currently developing in React and facing a challenge where I need to trigger a fade animation for an element only when it becomes visible on the screen. The issue is that right now, the animation plays as soon as the page loads, which defeats the ...

javascriptcssreactjsanimationcss-animations

How can we initiate a script once the scroll has reached the designated block using jQuery?

I am using a unique jQuery script that I created myself, and I want it to activate when the scroll reaches the tab block (the blue and grey block at the end of the page). Check out the live version This is my HTML: <section id="Block" class="containe ...

javascriptjqueryhtmlcss

What strategies can I use to keep text-area from wrapping onto a new line?

I'm having trouble with styling my description column <template v-slot:item.description="{ item }" class="description" style="overflow-wrap: normal"> {{ item.description }} </template> CSS <style scoped> ...

cssvue.jsvuejs2vue-componentvuetify.js

Searching for columns should be at the top of an angular datatable, not at the bottom

In my Angular 7 project, I am utilizing the library found at this link. I have followed the example provided, which can be seen here. Everything is working perfectly, except for the position of the search columns. I would like the search columns to appear ...

javascriptcssangulardatatablesangular-datatables

Iterate through three images using the `background-image` property in my Div

Is there a way to modify a code that loops through images based on an Img source in order to work with the "background-image" property of a div? HTML <div id="section2"></div> CSS #section2 { background-image: 'url(..images/banner1.jp ...

javascriptjqueryhtmlcss

jQuery: Retrieve the height of a concealed element using jQuery

Is there a more efficient way to retrieve the height of an element within a hidden div without having to show it first? Currently, I am showing the div, getting the height, and then hiding the parent div, which seems tedious. I'm working with jQuery ...

javascriptjqueryhtmlcss

What is the best way to utilize display:flex and justify-content:space-between, ensuring that the flex-item is centered when there is only a single item present?

How can I center a single flex item in a container with justify-content: space-between in CSS? #container { display: flex; justify-content: space-between; } <div id="container"> <div class='flex-item'></div> . ...

htmlcssflexbox

Creating a dynamic and unique border design in MUI

Currently, I am working with React 17 and MUI version 5.6. My component requires the ability to dynamically add new borders to the parent container based on user input. While I have come across CSS tutorials that demonstrate how to achieve this effect usin ...

cssreactjsmaterial-ui

Transitioning Opacity in CSS

I found inspiration for my project from the following source: https://codepen.io/plavookac/pen/qomrMw One challenge I'm facing is changing the opacity of the movement, which is not covered by the standard transition markers. .mainInner{ display ...

htmlcss