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..

    Make a slide show by fading in background images [closed]

    How to implement vertical tables using html5/CSS

    How to modify output buffer?

    HTML/CSS: flip3d how to do a 360 degrees with 4 pictures

    how to increase the photoshop sprite canvas width and height

    How to make gradual colour change when hover with CSS?

    How do I grey out the default text of a text box?

    How to scroll an html element both horizontally and vertically with top and side labels scrolling correctly

    How to make div scalable by using percentage in CSS

    How to remove all input outline?

    How to contol a CSS property with Javascript

    How to insert several images into HTML/CSS quickly? [closed]

    How to add a value in the y-axis at the bottom of a bar chart-css

    How to set width of container with two div's [closed]

    How prevent inheriting “position: relative” CSS

    How to make scrollable table's header fixed using css fixed position property?

    How do I make the dropdown menu width the same as the tab size?

    How to format a button with in Form tag, html?

    How to apply css for 1900x600 width screen resolution only

    How to reload CSS after ajax call

    How do you replicate this box-shadow effect?

    How to display block from left to right in css

    How to remove gap above and below my div? [duplicate]

    How to force div width with CSS to stretch to its content but not to be restricted by its container?

    How to avoid an hover on a menu item to affect the menu items on the right

    How to select all fieldsets in a form except the first one?

    How Visually Long is a String?

    How to allow content area to be expandable to right but not pop under sidebar?

    How to get the content of the bottom element of a flexbox to be 100% height its container

    How can i make a div to slide in from right side to left?