Как я могу сделать div, который больше (по высоте), то окно, быть фиксированным, но по-прежнему прокручивать без боковой панели?

Лучший пример, который я мог найти в интернете, был на этой странице Yahoo. Div справа фиксируется. Однако всякий раз, когда я прокручиваю вверх, он прокручивает страницу до самого верха, а когда я прокручиваю вниз, он прокручивается до нижней части div.

https://www.yahoo.com/news/

Введите описание изображения здесь

До сих пор мне удавалось создавать этот код:

.sidediv{
  height: 1000px;
  position: fixed;
max-height: 100%;
overflow-y: auto;
  
  }
#content{
  height: 2000px;
  background: green;
  width: 300px;
  }
#left{
  height:1000px;
  background: yellow;
  float: left;
  width: 120px;
  }
#right{
  width: 120px;
  background: blue;
  float: left;
  height: 100%;
  }
<div id="content">
  <div id="left">
    Left side, main content
    </div>
  <div id="right">
      <div class="sidediv">
        Side content here
      </div>
    </div>
  </div>

Спасибо!

1 ответ

  1. Я уверен, что это Yahoo! page использует JavaScript для эффекта, но (если я правильно понял ваш запрос) это может быть достигнуто только с CSS.

    Существует довольно недавнее новое значение свойства positionCSS, которое является position: sticky. Позвольте мне привести вам пример этого в действии (имитируя то, что я считаю вашей просьбой):

    aside {
        position: sticky;  /* Oh yeah! Sticky! */
        top: 0;  /* Distance from top when it's stuck. Play around with this value a bit */
    
        background-color: #B8c1c8;
        padding: 10px;
        height: 100px;
        width: 30%;
        margin-left: auto;
        box-sizing: border-box;
    }
    
    body {  margin: 0;  }
    
    header {
        height: 50px;
        background-color: #ddd;
    }
    
    nav {
        position: absolute;
        height: 100px;
        top: 50px;
        width: 100%;
        background-color: #eee;
    }
    
    article {
        border-bottom: 1px solid #ccc;
        padding: 10px;
    }
    <header>HEADER! Awesome! </header>
    <nav>NAVIGATION BAR! Awesome!</nav>
    <div>
        <aside>STICKY SIDE! Awesome!</aside>
        <article>
          <h2> Scroll the page down </h2>
          <p> to see the effect </p>
        </article>
        <article>
          <h2> Title! </h2>
          <p> Potatoes! </p>
        </article>
        <article>
          <h2> Title! </h2>
          <p> Potatoes! </p>
        </article>
        <article>
          <h2> Title! </h2>
          <p> Potatoes! </p>
        </article>
        <article>
          <h2> Title! </h2>
          <p> Potatoes! </p>
        </article>
    </div>

    В принципе, это делает его таким, что элемент остается на странице при прокрутке вниз, но только если вы прокрутите вниз. Он ведет себя нормально, если вы этого не делаете.

    Тем не менее, поддержка браузера для него не выглядит слишком большой. Internet Explorer, Edge, Chrome 55 — и большинство мобильных браузеров не поддерживают его вообще, что является позором. Надеюсь, через несколько лет он станет стандартным.

    И надеюсь, это все еще актуально для вас! Ура!