CODEWITHSUNDEEP
htmlcss
Arcane
Arcane

Reputation: 699

How to create menu scrolling with mouse scrolling

I would like to make a part of my web to scroll with a page when it reaches the top while scrolling. So it gets stuck on the top and scrolls while I am scrolling. Something like this: http://www.sutanaryan.com/Tutorials/fixed-menu-when-scrolling-page-with-CSS-and-jQuery/ But can it be done without jQuery, just with pure CSS3 and html5?

Upvotes: 1

Views: 888

Answers (2)

user2579857
user2579857

Reputation:

Maybe you can try this:

<ul class="scroll">
    <li><a href="#">Item 1 0</a></li>
    <li><a href="#">Item 1 1</a></li>
    <li><a href="#">Item 1 2</a></li>
    <li><a href="#">Item 1 3</a></li>
    <li><a href="#">Item 1 4</a></li>
    <li><a href="#">Item 1 5</a></li>
    <li><a href="#">Item 1 6</a></li>
    <li><a href="#">Item 1 7</a></li>
    <li><a href="#">Item 1 8</a></li>
    <li><a href="#">Item 1 9</a></li>
    <li><a href="#">Item 1 10</a></li>
    <li><a href="#">Item 1 11</a></li>
</ul>

And style.css

ul#css3menu1 ul.scroll{
    max-height: 135px;
    overflow-y: auto;
    overflow-x: hidden;
}

Upvotes: 0

WTFreezer
WTFreezer

Reputation: 138

It's called a persistent header, it's too long to explain so here's a link : http://css-tricks.com/persistent-headers/

Upvotes: 1

Related Questions