A series of divs continuously scrolling in succession with a stationary title/header

Question

A series of divs continuously scrolling in succession with a stationary title/header

My web page contains multiple div sections, each with its own content. I need the page to load initially with all sections visible. Then, I want the page to auto-scroll so that the header of the first section remains fixed while its contents scroll. Once the first section's contents end, the header of the second section replaces it and its contents start scrolling. This process continues until all sections have been shown, and then it starts again with the first section. Can someone guide me on how to achieve this?

You can find my code here: http://pastebin.com/EAYtsWAT

I am currently using jsscroller for automatic content scrolling. While I am able to scroll the contents, I'm unsure how to keep the header of each section fixed as the contents scroll, swapping headers as each section ends.

javascript jquery html css

Answer 1

Answer №1

Upon organizing the code provided and migrating it to jsfiddle, I have crafted a solution that should meet your requirements.

Due to the limited functionality of jscroller, certain adjustments were necessary to achieve the desired outcome:

function SectionManager(){
    this.currentSection = null;
    this.sections = $("#content .section");
    this.numSections = this.sections.length;

    this.transition = function (current){
            //SCROLLER CODE INITIATED HERE....
             $jScroller.config.refresh = 100;
            // Add Scroller Object
            $jScroller.config.obj = [];
            $jScroller.add(
                "#content .section.active .activityTbl",
                "#content .section.active .activityTbl > table",
                "up",
                3
            );
            // Start Autoscroller
            $jScroller.start();
            $jScroller.cache.init = true;
            //SCROLLER CODE CONCLUDED HERE....
    };
    this.callback = function (){
        this.currentSection = (this.currentSection != null)
            ? (this.currentSection + 1) % this.numSections
            : 0
        ;
        $("#content .section").removeClass("active");
        $("#content .section:eq(" + this.currentSection + ")").addClass("active");
        this.transition();
    }

    this.run = function(){
        this.callback();
    };

}

manager = new SectionManager();
manager.run();

It was also necessary to rewrite the $jScroller.scroll function in order to include an asynchronous callback upon reaching the end: This triggers the manager's callback function, transitioning the scrolling to the subsequent section.

Edit: For further details, please refer to the jsfiddle link

Answer 2

Upon organizing the code provided and migrating it to jsfiddle, I have crafted a solution that should meet your requirements.

Due to the limited functionality of jscroller, certain adjustments were necessary to achieve the desired outcome:

function SectionManager(){
    this.currentSection = null;
    this.sections = $("#content .section");
    this.numSections = this.sections.length;

    this.transition = function (current){
            //SCROLLER CODE INITIATED HERE....
             $jScroller.config.refresh = 100;
            // Add Scroller Object
            $jScroller.config.obj = [];
            $jScroller.add(
                "#content .section.active .activityTbl",
                "#content .section.active .activityTbl > table",
                "up",
                3
            );
            // Start Autoscroller
            $jScroller.start();
            $jScroller.cache.init = true;
            //SCROLLER CODE CONCLUDED HERE....
    };
    this.callback = function (){
        this.currentSection = (this.currentSection != null)
            ? (this.currentSection + 1) % this.numSections
            : 0
        ;
        $("#content .section").removeClass("active");
        $("#content .section:eq(" + this.currentSection + ")").addClass("active");
        this.transition();
    }

    this.run = function(){
        this.callback();
    };

}

manager = new SectionManager();
manager.run();

It was also necessary to rewrite the $jScroller.scroll function in order to include an asynchronous callback upon reaching the end: This triggers the manager's callback function, transitioning the scrolling to the subsequent section.

Edit: For further details, please refer to the jsfiddle link

Answer 3

Answer №2

If you're looking to add some dynamic scrolling effects to your website, you might want to check out Scrollorama. This tool allows you to easily pin and unpin elements as users scroll through the page, creating a unique interactive experience for visitors.

Answer 4

If you're looking to add some dynamic scrolling effects to your website, you might want to check out Scrollorama. This tool allows you to easily pin and unpin elements as users scroll through the page, creating a unique interactive experience for visitors.

A series of divs continuously scrolling in succession with a stationary title/header

Answer №1

Answer №2

Similar questions

Updating the variables of HTML components using JavaScript after making an AJAX request

jQuery Datatables Ajax request breaks after initial execution

Design a search page with expandable fields for a user-friendly experience

Transmit information to Vue.js component

Monitor the x and y positions for platformer game interactions using only JavaScript and jQuery

Having trouble syncing a controller with AngularJS

What is the best way to verify if an Android permission request has been successfully granted or denied

Show Text When Clicking Within Separate DIVs

Issue with event delegation when using if-else conditions is not being resolved

JavaScript - Problem transferring an object between two different JavaScript files

How can I ensure that my function only returns a value once the ajax call has finished?

Passing a null value to the server through jQuery AJAX is not possible. Instead, the server receives the string "null" as the value

Utilizing Regex to eliminate consecutive duplicates in a string separated by spaces

How can I retrieve the value of a specific <span> element by referencing the class of another <span> within

Different ways to trigger code behind method with onclick excluding asp:button OnClick

Working efficiently with query selectors in React using useRef

``Passing a variable to a Jquery function - A step-by-step guide

Creating a unique custom bullet style by utilizing the ::before pseudo-element that results in a noticeable gap between the first two

jQuery Mobile hyperlinks are malfunctioning despite having identical coding

What methods can I use to accomplish the transformation of superimposed images?