Dynamically reorder section

Question

I have a single-page site with four sections:

<section id=“4”>
<section id=“3”>
<section id=“2”>
<section id=“1”>

And I want to change the order when I scroll-up (the scrolling is reverse and u can't scroll down). Something like this:

<section id=“1”>
<section id=“4”>
<section id=“3”>
<section id=“2”>

Can anyone give me a trick on how to do it?

Hi, welcome to StackOverflow! I'm sorry but here on SO you should not ask for a task. Rather, you need to try something for yourself, and when/if you get stuck at something specific, then we can help you. Read more: http://stackoverflow.com/help/on-topic — LcSalazar, Jul 16 '15 at 18:00

score 0 · Answer 1 · answered Jul 16 '15 at 18:07

Not the best answer but a solution to your question:

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // code when scrolled down
   } else {
      $("#content").html('');
     $("#content").html(' <section id="1"></section><section id="4"></section><section id="3"></section><section id="2"></section>');
    
   }
   lastScrollTop = st;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content" style="min-height:1220px">
  <section id="4"></section>
<section id="3"></section>
<section id="2"></section>
<section id="1"></section>
  </div>

score -1 · Answer 2 · edited May 23 '17 at 11:51

-1

Just have a <div onscroll="reorder()"> and utilize the solution on this StackOverflow page: change order divs with jQuery

edited May 23 '17 at 11:51

Community

1
1

answered Jul 16 '15 at 18:00

Brian

1,659
12
17

Dynamically reorder section

2 Answers2