How to scroll through a div before the page scrolls?


Tags: css,css3,overflow

Problem :

I am trying to replicate the effect of this website

http://www.trulia.com/

When you scroll it scrolls through the right div before scrolling the entire page at the end. How is it possible to achieve this kind of effect? Is it possible purely with CSS or does it require JS? I have been trying to replicate it using overflows but it doesn't work the same.



Solution :

You should be able to achieve this with the help of css postioning propertyfixed.

#main {
  background-color: aqua;
}
#container {
  width: 40%;
  float: left;
  top: 20px;
  position: fixed;
}
#side-panel {
  float: right;
  width: 50%;
  background-color: white;
}
#footer {
  clear: both;
  background: green;
  width: 100%;
  position: relative;
  height: 100vh;
}
<div id="main">
  <div id="container">

    This is fixed

  </div>

  <div id="side-panel">

    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. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less
    normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem
    ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Contrary to popular belief, Lorem Ipsum is not simply random text.
    It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem
    Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written
    in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s
    is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. 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. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less
    normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem
    ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Contrary to popular belief, Lorem Ipsum is not simply random text.
    It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem
    Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written
    in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s
    is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

  </div>


  <div id="footer">
    This is footer
  </div>

</div>

In my attempt I essentially made the left panel fixed and the right panel float to the right.

However I'm not sure if this is the most elegant solution.


    CSS Howto..

    how to change the color of disabled controls

    In CSS, how to make the colored background be at least 50% of pagewidth and at most 90%, and as wide as necessary?

    How to make jQuery slide open and close with CSS class

    How do i check if cell is colored and get their postion in the table with javascript

    How to resize div size proportional with browser size?

    How to hide element that is currently mousedover and shown via :hover css pseudo class via jQuery

    How to position div which contains font-awesome icons to centre of another div?

    Do you know about this weird thing. “AS3, Button width cannot change by setStyle(). However, inline CSS can change width.”

    How to avoid bootstrap from overriding id-called custom css?

    How to style input type file using css

    Preventing jquery's show/hide from adding inline style?

    How to add elements to an specified position without influence of other elements?

    How to Change XYChart's color in JavaFx?

    How to insert instance variable as css rule in Rails?

    How to align the menu to center after certain width media query fires for RWD

    How to change CSS in Magento

    Bootstrap Carousel - how to fade between slides slowly

    How to control number of items per row using media queries in Flexbox?

    CSS: How to set hover effect on menu-item when submenu-item is displayed

    How to access the set qt stylesheet properties (css like grammar), or is there an css to xml converter?

    Show DIV message at every “X” number of minutes?

    How to put all my elements in line horizontally and Should be Responsive using bootstrap?

    jQuery, CSS: Two divs, how can I make them “show”next to each other?

    How do I change the arrow in the select with Chosen plugin?

    How to create hidden pop out side menu

    How to stick a background behind the navbar?

    Newbie: How to have a row background in my case?

    how to implement “blog” page in HTML/CSS? [closed]

    How to read minified CSS?

    How to use Resource bundle(Client Bundle) in JSNI?