Can the top header stay fixed to the top of the screen even when scrolling down?

Question

Can the top header stay fixed to the top of the screen even when scrolling down?

Code snippet: http://jsfiddle.net/R3G2K/1/

In my project, there are multiple divs with content and each div has a header. My goal is to make the last header that goes out of viewport "sticky" or fixed at the top.

I have explored various solutions for this issue, but none of them seem to be effective when dealing with multiple headers.


$('.content').scroll(function(){
    console.log('scrolling')
    $('.itemheader').each(function(){
        var top = $(this).offset().top;
        console.log(top);

        if(top<25){
            $(this).addClass('stick');
        } else {
            $(this).removeClass('stick');
        }
    })
});

I suspect the problem lies in the fact that each header shares the same class name without a unique identifier, causing my previous attempt to fail.

javascript jquery html css

Answer 1

Answer №1

Discover the perfect solution at this link

This resource provided exactly what I needed:

Check out the demo here

$(document).ready(function () {
// 1. Accessing necessary variables
var $container = $('#box');
var $headers = $container.find('h2');
var zIndex = 2;
var containerTop = $container.offset().top + parseInt($container.css('marginTop')) + parseInt($container.css('borderTopWidth'));
var $fakeHeader = $headers.filter(':first').clone();

// 2. Positioning h2 elements absolutely and increasing z-index
$headers.each(function () {
   // set position absolute, etc
   var $header = $(this), height = $header.outerHeight(), width = $header.outerWidth();

   zIndex += 2;

   $header.css({
       position: 'absolute',
       width: $header.width(),
       zIndex: zIndex
   });

   // create white space
   var $spacer = $header.after('<div />').next();
   $spacer.css({
       height: height,
       width: width
   });
});

// 3. Attaching scroll event to change text of fake heading
$container.scroll(function () {
    $headers.each(function () {
        var $header = $(this);
        var top = $header.offset().top;

        if (top < containerTop) {
            $fakeHeader.text($header.text());
            $fakeHeader.css('zIndex', parseInt($header.css('zIndex'))+1);
        }
    });
});

// 4. Initialization steps
$container.wrap('<div class="box" />');
$fakeHeader.css({ zIndex: 1, position: 'absolute', width: $headers.filter(':first').width() });
$container.before($fakeHeader.text($headers.filter(':first').text()));

});

Answer 2

Discover the perfect solution at this link

This resource provided exactly what I needed:

Check out the demo here

$(document).ready(function () {
// 1. Accessing necessary variables
var $container = $('#box');
var $headers = $container.find('h2');
var zIndex = 2;
var containerTop = $container.offset().top + parseInt($container.css('marginTop')) + parseInt($container.css('borderTopWidth'));
var $fakeHeader = $headers.filter(':first').clone();

// 2. Positioning h2 elements absolutely and increasing z-index
$headers.each(function () {
   // set position absolute, etc
   var $header = $(this), height = $header.outerHeight(), width = $header.outerWidth();

   zIndex += 2;

   $header.css({
       position: 'absolute',
       width: $header.width(),
       zIndex: zIndex
   });

   // create white space
   var $spacer = $header.after('<div />').next();
   $spacer.css({
       height: height,
       width: width
   });
});

// 3. Attaching scroll event to change text of fake heading
$container.scroll(function () {
    $headers.each(function () {
        var $header = $(this);
        var top = $header.offset().top;

        if (top < containerTop) {
            $fakeHeader.text($header.text());
            $fakeHeader.css('zIndex', parseInt($header.css('zIndex'))+1);
        }
    });
});

// 4. Initialization steps
$container.wrap('<div class="box" />');
$fakeHeader.css({ zIndex: 1, position: 'absolute', width: $headers.filter(':first').width() });
$container.before($fakeHeader.text($headers.filter(':first').text()));

});

Can the top header stay fixed to the top of the screen even when scrolling down?

Answer №1

Similar questions

Ensuring the server application is up and running before initiating the mocha tests

Engaging with the CSS content attribute

Utilize anychart.js to define the axis using JSON data

When the video message bubble is touched within the chat app, a video player will automatically pop up (using React Native)

Moving data from the bottom of the page to the top

Encountered an error in React where the declaration file for a module could not be located

Utilizing Socket IO and Node JS to stream audio from a microphone via sockets

Disregard the instructions upon loading the page

Synchronizing other components with a filtered query from the List in Admin-on-rest: Best practices

Utilizing HTML snippets for AJAX integration

When adding an object to an array in AngularJS, it seems to trigger updates for

How is it possible for the igx-expansion-panel to close when there is a nested angular accordion present?

Is there a way to raise an error in React Native and make it visible?

Having Trouble Operating Virtual Tour in Flash

How to save the value of `this.$route.params.id` in a Vue.js data property?

Utilize Meteor-tabular to effortlessly export data with convenient HTML5 export buttons

Utilizing the Context Object in a Slack API Bolt Project for seamless property transfer between methods

Combining Jquery and PHP to Implement Date Type in MySQL Database

Creating a cron job that can be rescheduled using Node.js

Swapping icons in a foreach loop with Bootstrap 4: What's the most effective approach?