Div начните прокрутку, когда заголовок достигнет вершины и остановится от прокрутки, когда нижняя часть достигает нижнего колонтитула

Question

У меня есть страница под названием project, на этой странице есть две сетки, одна называется «imagesGrid», а другая - «detailsBox» », они плавают рядом друг с другом (т. е. оба имеют ширину, равную 50%, и отображают встроенный блок). Я пытаюсь сделать «detailsBox», чтобы начать прокрутку страницы, когда заголовок достигнет вершины, и остановится от прокрутки, когда ее дно достигнет верхней части нижнего колонтитула. Я также пытаюсь полностью отключить функцию от работы и установить «detailsBox» в качестве относительного, когда размер экрана ниже 700 пикселей.

Я пробовал и экспериментировал с десятками учебников, например: make div stick to the top of the screen and stop before hitting the footer и http://jsfiddle.net/FDv2J/3/ без надежды.

Каков наилучший путь для решения моей проблемы? Вот ссылка на предварительный просмотр в прямом эфире страницы: http://www.loaidesign.co.uk/portfolio? Project = Test_Project И вот HTML и CSS, у меня нет рабочего скрипта JavaScript, и я устал от тех, что указаны в ссылках выше, а также многие другие отсюда, google и codepen, но, похоже, не могут заставить их работать для меня.

HTML:

<div class="wrapperB"> 
    <div id="portfolio-projectPage" class="content"> 
     <div class="imagesGrid"> 
      <p>Website</p> 
      <img alt="Adonis Cars Rental website design" src="images/adonis-cars-website.jpg"> 
     </div> 
     <div class="detailsBox"> 
       <h3>Adonis Cars</h3> 

      <p>It's a luxuries cars rental agency based in Qatar</p> 
      <p><a href="http://adoniscars.com" target="_blank">www.adoniscars.com</a> 
      </p> 
      <p><strong>Skills:</strong> Web Design</p> 
      <p><strong>Date:</strong> 2012</p> 
      <p class="share icons"><strong>Share This Project On:</strong> 
       <br> <a href="#" class="facebook" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 'facebook-share-dialog', 'width=626,height=436'); return false;" class="facebook"><span>Facebook</span></a>  <a href="#" class="twitter" onclick="return popitup('https://twitter.com/share')"><span>Twitter</span></a> 

       <!--Twitter Popup Script--> 
       <script type="text/javascript"> 
        function popitup(url) { 
         newwindow = window.open(url, 'name', 'height=440,width=700'); 
         if (window.focus) { 
          newwindow.focus(); 
         } 
         return false; 
        } 
       </script> 
      </p> 
      <div> <a href="../portfolio.html">Go Back</a> 
    <a class="scrollup">Scroll Up</a> 
      </div> 
     </div> 
    </div> 
</div> 

CSS:

.imagesGrid, .detailsBox { 
    display: inline-block; 
    vertical-align: top; 
} 
.imagesGrid { 
    width: 65%; 
} 
.imagesGrid img { 
    border: 1px solid #EAEAEA; 
    margin-bottom: 10px; 
    display: block; 
} 
.imagesGrid img:last-of-type { 
    margin-bottom: 0; 
} 
.imagesGrid p { 
    border-top: 1px solid #EAEAEA; 
    padding-top: 8px; 
    margin: 10px 0; 
} 
.imagesGrid p:first-of-type { 
    border-top: none; 
    padding: 0 0 10px 0; 
    margin: 0; 
} 
.detailsBox { 
    position: fixed; 
    top: 0; 
    width: 347px; 
    margin-top: 28px; 
    padding-left: 30px; 
} 
.detailsBox p { 
    border-bottom: 1px solid #EAEAEA; 
    padding-bottom: 10px; 
    margin: 10px 0; 
} 
.detailsBox p:first-of-type { 
    border-bottom: 3px solid #EAEAEA; 
    margin: 0; 
} 
.detailsBox p:last-of-type { 
    border-bottom: 3px solid #EAEAEA; 
    margin: 0; 
} 
.detailsBox a:hover { 
    color: #5575A6; 
} 
.detailsBox div { 
    background-color: #F5F5F5; 
    padding: 15px 0; 
    text-align: center; 
    border-radius: 0 0 3px 3px; 
    -moz-border-radius: 0 0 3px 3px; 
    -webkit-border-radius: 0 0 3px 3px; 
} 
.detailsBox div a { 
    background-color: #EAEAEA; 
    padding: 10px 14px; 
    cursor: pointer; 
    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
} 
.detailsBox div a:hover, .detailsBox div a:active { 
    color: #FFFFFF; 
    background-color: #5575A6; 
} 
.share.icons { 
    cursor: default; 
} 
.share.icons a { 
    vertical-align: middle; 
    background-color: #F5F5F5; 
} 
.share strong { 
    margin-right: 10px; 
} 
.share br { 
    display: none; 
} 
.scrollup { 
    display: none; 
} 

Answer 1

Вы можете проверить StickyFloat

Он использует JS для достижения того, что вы хотите. Проблема у вас есть то, что вы пытаетесь использовать CSS, чтобы условно-то делать, когда на самом деле это не то, что CSS для

CSS «Поплавок» VS Javascript

Если вы хотите, чтобы плавали ДИВ оставаться в определенной позиции все время, все в порядке. Но CSS не может различать элементы на странице. Вот official spec:

fixed The element is positioned relative to the browser window 

Проблема фиксируется связана в окне браузера, а не о других элементов. JS, с другой стороны, использует DOM для создания массива элементов на странице, для которых вы можете создать условия. Очень хотелось бы взглянуть на StickyFloat или на другие «липкие» JS-плагины :)