What methods can I use to keep content visible when a Fixed-Header is in place?

Question

What methods can I use to keep content visible when a Fixed-Header is in place?

I have created a never-ending page, where more content is loaded at the bottom when the user scrolls to the end. Specifically, I am loading blog posts. This part of the project is complete. However...

My boss has asked me to add a sliding feature that showcases the newly added posts. The issue I am facing is that the older posts at the top disappear under a fixed header when I slide up the 'posts-container'.

For a better understanding, please scroll to the bottom of this result page: http://jsfiddle.net/jlstr/D4BqN/

In short, can anyone guide me on how to design a layout for the posts that displays all posts without them disappearing under the fixed header?

Thank you in advance! Best Regards!

javascript jquery html css

Answer 1

Answer №1

If you want the page to automatically scroll down, try using this code snippet instead of adjusting the margin: http://jsfiddle.net/D4BqN/2/.

function $slide() {
    $('body').animate({
        scrollTop: '+=100'
    }, 1000);
}

This approach is more intuitive as it aligns with the natural flow of scrolling towards the new post. (Currently, you are moving up the element which may position it below the fixed header.)

Answer 2

If you want the page to automatically scroll down, try using this code snippet instead of adjusting the margin: http://jsfiddle.net/D4BqN/2/.

function $slide() {
    $('body').animate({
        scrollTop: '+=100'
    }, 1000);
}

This approach is more intuitive as it aligns with the natural flow of scrolling towards the new post. (Currently, you are moving up the element which may position it below the fixed header.)

Answer 3

Answer №2

Perhaps modifying the code line

'padding-left': '-=100'

to

'margin-right': '+=100'

within your animate() method could provide a solution.

Answer 4

Perhaps modifying the code line

'padding-left': '-=100'

to

'margin-right': '+=100'

within your animate() method could provide a solution.

What methods can I use to keep content visible when a Fixed-Header is in place?

Answer №1

Answer №2

Similar questions

useEffect not triggering when the orientation is updated

Keep an ongoing execution of a node.js file by sending an HTTP request repeatedly

Utilizing children as a prop within a Vue component

Having trouble getting Node.js, express, socket.io, and ejs to work together?

Showing JSON response on an HTML page using AngularJS

Is there an issue with .addClass not working on imported HTML from .load in jQuery?

Videos fail to load on iPhone but load successfully on desktop and Android web browsers

Slide up using jQuery to the left direction

Is there a way for me to determine which .js script is modifying a particular HTML element?

Navigating the world of getElementById and addEventListener outside of the DOM

Display the output of awk on a single line for specific columns

how can you activate a modal without relying on bootstrap?

Fetch the initial row using a jQuery Ajax request

Challenges in managing click events

Is there a way to tally up the overall count of digits in a number using TypeScript?

Ways to eliminate the blue outline on a checkbox in bootstrap 4.1

Is there a way to extract an icon from an object or array?

Tips for retrieving the success result of a jQuery AJAX call

Utilizing ReactJS to creatively overlay a video on top of an image with the option to

How can I create a Discord bot command that ignores case sensitivity?