Full page scroll to a particular section

Question

I have a header, footer and two body sections. I wanted to do a full page scroll only to my parallax container. I managed to come up with markup and styling to the parallax but didn't have success with the script.


<div class="wrapper">
   <div class="top-content">
      <p>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
   </div>
   <div class="parallax">
      <div class="parallax__screen">
         <div class="parallax__image">
            <div class="parallax__illustration" style="background-image: url('https://picsum.photos/id/1/200/300');"></div>
         </div>
         <div class="parallax__copy">
            <p>
               Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            </p>
         </div>
      </div>
      <div class="parallax__screen">
         <div class="parallax__image">
            <div class="parallax__illustration" style="background-image: url('https://picsum.photos/id/22/200/300');"></div>
         </div>
         <div class="parallax__copy">
            <p>
               Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
            </p>
         </div>
      </div>
      <div class="parallax__screen">
         <div class="parallax__image">
            <div class="parallax__illustration" style="background-image: url('https://picsum.photos/id/15/200/300');"></div>
         </div>
         <div class="parallax__copy">
            <p>
               it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
            </p>
         </div>
      </div>
      <div class="parallax__screen">
         <div class="parallax__image">
            <div class="parallax__illustration" style="background-image: url('https://picsum.photos/id/10/200/300');"></div>
         </div>
         <div class="parallax__copy">
            <p>
               It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
            </p>
         </div>
      </div>
   </div>
   <div class="bottom-content">
      <p>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
   </div>
</div>

Any help would be appreciated. Here is my fiddle

You'll need JS solution to handle this scenario, here's the example: https://codepen.io/igstudio/pen/pbYOab/?html-preprocessor=pug — Rikin, Jun 06 '19 at 21:07

score 0 · Answer 1 · answered Jun 07 '19 at 14:57

0

Are you trying to avoid any library and do it by yourself? Either way I don't think you can do it with CSS only, you'll need some JS.

I recommend fullPage.JS, really easy to use.

answered Jun 07 '19 at 14:57

iamdlm

1,885
1
11
21

I am trying to avoid library but I am open to javascript solution without any library involved. – Benjamin Jun 10 '19 at 06:53

score 0 · Answer 2 · answered Jun 10 '19 at 15:12

Was this what you were aiming for?

* {
  margin: 0;
  padding: 0;
}

body {//you had a typo here
  background-color: #fff;
  font-size: 16px;
  color: #333;
}

.bottom-content {
  position: absolute;
}

.parallax {
  position: sticky;
  top: 96px;
  overflow: hidden;
  @include e(screen) {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 96px);
    width: 100vw;
  }
  @include e(image) {
    height: calc(100vh - 96px);
    border-radius: 0 rem(5) rem(5) 0;
    width: 100vw;
    z-index: 10;
  }
  @include e(illustration) {
    height: inherit;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
  }
  @include e(copy) {
    width: 100vw;
    z-index: 100;
    position: absolute;
  }
}

with this styling you achieve parallax with text on top

score 0 · Answer 3 · answered Jun 11 '19 at 08:17

You can use something like below.

var slide = function() {
        $('.nextsection').show();
            $('mainsection').find('.currentsection').animate({
                marginLeft : '-100%'
            }, 500);
            $('mainsection').find('.nextsection').animate({
                marginLeft : '0%'
            }, 500, function() {
                if (!_.isUndefined(fn)) {
                    fn();
                }
            });
    };

Here 'nextsection' is what you want to slide to and 'currentsection' is what you slide from. 'mainsection' is like where both the 'nextsection' and 'currentsection' contains.

score 0 · Answer 4 · edited Jun 13 '19 at 06:18

0

Some examples which use only css:

edited Jun 13 '19 at 06:18

z11i

951
11
26

answered Jun 12 '19 at 20:13

Thorsten Wolske

424
4
9

score -1 · Answer 5 · answered Jun 06 '19 at 20:51

Are you trying to have the header fixed and the parallex section scroll? If so you can set the position and z-index of the header (top-content).

<style>.top-content {position: fixed; z-index: 100; background-color: white;} . 
</style>

Here is an example: Fiddle Here

Full page scroll to a particular section

5 Answers5