Snap Points Demo 2

< Back

Each header element (h1) on this page has a snap point attached to it. As you scroll through it, you'll notice the page "snaps" to the top of the next header. This can be tricky if you have a lot of text after the last header. The user may not be able to get to it. This demo also makes use of the snapAll() function, rather than adding the data-snap to each <h1>.

Pellentesque libero mauris, ultrices et gravida eu, accumsan nec neque. Quisque placerat urna et bibendum venenatis. Ut ut purus porttitor, dictum leo et, ultrices lacus. Integer et est in odio dapibus sodales. Donec dictum odio sed tempor gravida. Vivamus massa urna, posuere in dapibus sed, tempus eget ex. Nullam eget mi massa. In semper metus a nisi fringilla sollicitudin. Praesent ipsum augue, pharetra nec molestie at, tristique et odio. Sed eget iaculis neque. Fusce scelerisque elit a urna malesuada, non pulvinar sem molestie. Integer efficitur et lectus pulvinar maximus. Nulla ultrices neque eu turpis euismod venenatis. Integer laoreet consequat augue eu eleifend. Maecenas nisl lorem, imperdiet ut turpis sit amet, volutpat vestibulum nisi.

Nunc venenatis mollis orci sit amet faucibus. Nunc a convallis ligula. Morbi laoreet nunc eleifend libero tempus ornare. Quisque ut malesuada ligula. Sed sit amet viverra est. Aliquam erat volutpat. Sed scelerisque mi eget eros ultrices dapibus. Cras faucibus mattis rhoncus. Curabitur posuere leo accumsan dolor feugiat, at bibendum erat tristique. Cras vitae hendrerit quam. Nullam accumsan, orci vitae porta consequat, turpis velit mattis ipsum, ac bibendum leo sapien vel purus. Etiam sed velit ante. Duis viverra, nisl ac feugiat laoreet, eros dui dictum felis, iaculis facilisis urna ante sed tortor. Aenean feugiat metus vitae lacus finibus facilisis. Ut feugiat libero sed pharetra luctus.

Second Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo lacus ante. Donec gravida neque euismod erat tempor tempus. Suspendisse tincidunt tristique augue, sed ultricies sapien. Nullam porttitor eros eget malesuada commodo. Cras tincidunt nisl mi, in pharetra eros sagittis sed. Donec sit amet nulla vitae justo accumsan tristique id sit amet ex. Cras erat arcu, rhoncus at venenatis a, tempus et tortor. Sed venenatis enim magna, et consequat dolor dignissim a. Proin a nisl aliquet, viverra dui bibendum, porta purus. Praesent vitae mauris et massa laoreet dignissim vel nec felis. Maecenas feugiat luctus nunc. Nullam sagittis sit amet ante non vulputate. Pellentesque lobortis mi eu nisi feugiat, et vehicula purus rutrum.

Pellentesque libero mauris, ultrices et gravida eu, accumsan nec neque. Quisque placerat urna et bibendum venenatis. Ut ut purus porttitor, dictum leo et, ultrices lacus. Integer et est in odio dapibus sodales. Donec dictum odio sed tempor gravida. Vivamus massa urna, posuere in dapibus sed, tempus eget ex. Nullam eget mi massa. In semper metus a nisi fringilla sollicitudin. Praesent ipsum augue, pharetra nec molestie at, tristique et odio. Sed eget iaculis neque. Fusce scelerisque elit a urna malesuada, non pulvinar sem molestie. Integer efficitur et lectus pulvinar maximus. Nulla ultrices neque eu turpis euismod venenatis. Integer laoreet consequat augue eu eleifend. Maecenas nisl lorem, imperdiet ut turpis sit amet, volutpat vestibulum nisi.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo lacus ante. Donec gravida neque euismod erat tempor tempus. Suspendisse tincidunt tristique augue, sed ultricies sapien. Nullam porttitor eros eget malesuada commodo. Cras tincidunt nisl mi, in pharetra eros sagittis sed. Donec sit amet nulla vitae justo accumsan tristique id sit amet ex. Cras erat arcu, rhoncus at venenatis a, tempus et tortor. Sed venenatis enim magna, et consequat dolor dignissim a. Proin a nisl aliquet, viverra dui bibendum, porta purus. Praesent vitae mauris et massa laoreet dignissim vel nec felis. Maecenas feugiat luctus nunc. Nullam sagittis sit amet ante non vulputate. Pellentesque lobortis mi eu nisi feugiat, et vehicula purus rutrum.

Pellentesque libero mauris, ultrices et gravida eu, accumsan nec neque. Quisque placerat urna et bibendum venenatis. Ut ut purus porttitor, dictum leo et, ultrices lacus. Integer et est in odio dapibus sodales. Donec dictum odio sed tempor gravida. Vivamus massa urna, posuere in dapibus sed, tempus eget ex. Nullam eget mi massa. In semper metus a nisi fringilla sollicitudin. Praesent ipsum augue, pharetra nec molestie at, tristique et odio. Sed eget iaculis neque. Fusce scelerisque elit a urna malesuada, non pulvinar sem molestie. Integer efficitur et lectus pulvinar maximus. Nulla ultrices neque eu turpis euismod venenatis. Integer laoreet consequat augue eu eleifend. Maecenas nisl lorem, imperdiet ut turpis sit amet, volutpat vestibulum nisi.

Third Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo lacus ante. Donec gravida neque euismod erat tempor tempus. Suspendisse tincidunt tristique augue, sed ultricies sapien. Nullam porttitor eros eget malesuada commodo. Cras tincidunt nisl mi, in pharetra eros sagittis sed. Donec sit amet nulla vitae justo accumsan tristique id sit amet ex. Cras erat arcu, rhoncus at venenatis a, tempus et tortor. Sed venenatis enim magna, et consequat dolor dignissim a. Proin a nisl aliquet, viverra dui bibendum, porta purus. Praesent vitae mauris et massa laoreet dignissim vel nec felis. Maecenas feugiat luctus nunc. Nullam sagittis sit amet ante non vulputate. Pellentesque lobortis mi eu nisi feugiat, et vehicula purus rutrum.

Pellentesque libero mauris, ultrices et gravida eu, accumsan nec neque. Quisque placerat urna et bibendum venenatis. Ut ut purus porttitor, dictum leo et, ultrices lacus. Integer et est in odio dapibus sodales. Donec dictum odio sed tempor gravida. Vivamus massa urna, posuere in dapibus sed, tempus eget ex. Nullam eget mi massa. In semper metus a nisi fringilla sollicitudin. Praesent ipsum augue, pharetra nec molestie at, tristique et odio. Sed eget iaculis neque. Fusce scelerisque elit a urna malesuada, non pulvinar sem molestie. Integer efficitur et lectus pulvinar maximus. Nulla ultrices neque eu turpis euismod venenatis. Integer laoreet consequat augue eu eleifend. Maecenas nisl lorem, imperdiet ut turpis sit amet, volutpat vestibulum nisi.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo lacus ante. Donec gravida neque euismod erat tempor tempus. Suspendisse tincidunt tristique augue, sed ultricies sapien. Nullam porttitor eros eget malesuada commodo. Cras tincidunt nisl mi, in pharetra eros sagittis sed. Donec sit amet nulla vitae justo accumsan tristique id sit amet ex. Cras erat arcu, rhoncus at venenatis a, tempus et tortor. Sed venenatis enim magna, et consequat dolor dignissim a. Proin a nisl aliquet, viverra dui bibendum, porta purus. Praesent vitae mauris et massa laoreet dignissim vel nec felis. Maecenas feugiat luctus nunc. Nullam sagittis sit amet ante non vulputate. Pellentesque lobortis mi eu nisi feugiat, et vehicula purus rutrum.

Pellentesque libero mauris, ultrices et gravida eu, accumsan nec neque. Quisque placerat urna et bibendum venenatis. Ut ut purus porttitor, dictum leo et, ultrices lacus. Integer et est in odio dapibus sodales. Donec dictum odio sed tempor gravida. Vivamus massa urna, posuere in dapibus sed, tempus eget ex. Nullam eget mi massa. In semper metus a nisi fringilla sollicitudin. Praesent ipsum augue, pharetra nec molestie at, tristique et odio. Sed eget iaculis neque. Fusce scelerisque elit a urna malesuada, non pulvinar sem molestie. Integer efficitur et lectus pulvinar maximus. Nulla ultrices neque eu turpis euismod venenatis. Integer laoreet consequat augue eu eleifend. Maecenas nisl lorem, imperdiet ut turpis sit amet, volutpat vestibulum nisi.

Fourth Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo lacus ante. Donec gravida neque euismod erat tempor tempus. Suspendisse tincidunt tristique augue, sed ultricies sapien. Nullam porttitor eros eget malesuada commodo. Cras tincidunt nisl mi, in pharetra eros sagittis sed. Donec sit amet nulla vitae justo accumsan tristique id sit amet ex. Cras erat arcu, rhoncus at venenatis a, tempus et tortor. Sed venenatis enim magna, et consequat dolor dignissim a. Proin a nisl aliquet, viverra dui bibendum, porta purus. Praesent vitae mauris et massa laoreet dignissim vel nec felis. Maecenas feugiat luctus nunc. Nullam sagittis sit amet ante non vulputate. Pellentesque lobortis mi eu nisi feugiat, et vehicula purus rutrum.

Pellentesque libero mauris, ultrices et gravida eu, accumsan nec neque. Quisque placerat urna et bibendum venenatis. Ut ut purus porttitor, dictum leo et, ultrices lacus. Integer et est in odio dapibus sodales. Donec dictum odio sed tempor gravida. Vivamus massa urna, posuere in dapibus sed, tempus eget ex. Nullam eget mi massa. In semper metus a nisi fringilla sollicitudin. Praesent ipsum augue, pharetra nec molestie at, tristique et odio. Sed eget iaculis neque. Fusce scelerisque elit a urna malesuada, non pulvinar sem molestie. Integer efficitur et lectus pulvinar maximus. Nulla ultrices neque eu turpis euismod venenatis. Integer laoreet consequat augue eu eleifend. Maecenas nisl lorem, imperdiet ut turpis sit amet, volutpat vestibulum nisi.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo lacus ante. Donec gravida neque euismod erat tempor tempus. Suspendisse tincidunt tristique augue, sed ultricies sapien. Nullam porttitor eros eget malesuada commodo. Cras tincidunt nisl mi, in pharetra eros sagittis sed. Donec sit amet nulla vitae justo accumsan tristique id sit amet ex. Cras erat arcu, rhoncus at venenatis a, tempus et tortor. Sed venenatis enim magna, et consequat dolor dignissim a. Proin a nisl aliquet, viverra dui bibendum, porta purus. Praesent vitae mauris et massa laoreet dignissim vel nec felis. Maecenas feugiat luctus nunc. Nullam sagittis sit amet ante non vulputate. Pellentesque lobortis mi eu nisi feugiat, et vehicula purus rutrum.

Pellentesque libero mauris, ultrices et gravida eu, accumsan nec neque. Quisque placerat urna et bibendum venenatis. Ut ut purus porttitor, dictum leo et, ultrices lacus. Integer et est in odio dapibus sodales. Donec dictum odio sed tempor gravida. Vivamus massa urna, posuere in dapibus sed, tempus eget ex. Nullam eget mi massa. In semper metus a nisi fringilla sollicitudin. Praesent ipsum augue, pharetra nec molestie at, tristique et odio. Sed eget iaculis neque. Fusce scelerisque elit a urna malesuada, non pulvinar sem molestie. Integer efficitur et lectus pulvinar maximus. Nulla ultrices neque eu turpis euismod venenatis. Integer laoreet consequat augue eu eleifend. Maecenas nisl lorem, imperdiet ut turpis sit amet, volutpat vestibulum nisi.