Как заставить блок с position:absolute скролиться

261
29 ноября 2017, 00:02

Есть вот такой пример (код ниже) там при скролле шапка опускается вниз и если нажать на серые кнопки, то к элементам меню создаются цветные блоки. Но они не скролятся вместе с шапкой, как заставить их скролиться?

(function($) { 
  $(".capabilities-caption").click(function() { 
    $(".sss").remove(); 
    $(".region-pointer").each(function(e) { 
      $("body").prepend('<div class="sss" id="sss' + e + '"></div>'); 
      $("#sss" + e) 
        .html($(this).attr("tittle")) 
        .css({ 
          top: $(this).offset().top - 35, 
          left: $(this).offset().left - 32 
        }); 
    }); 
  }); 
})(jQuery);
body { 
   margin: 0;  
} 
 
.header { 
    height: 100px; 
    background-color: #ddcbaf; 
    text-align: center; 
} 
 
.header h1 { 
    margin-top: 0; 
    padding-top: 20px; 
} 
 
.menu { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    background-color: #BFFFF3; 
    top: 0; 
    position: -webkit-sticky; 
    position: sticky; 
} 
 
.menu li { 
    display: inline-block; 
    text-align: center; 
    width: 25%; 
} 
 
.menu li:hover, 
.menu li:focus { 
    background-color: #66FFE3; 
} 
 
.menu a { 
    display: block; 
    padding: 10px 0; 
    text-decoration: none; 
} 
 
.sticky { 
    top: 0; 
    position: fixed; 
} 
 
.container { 
  padding: 0 20px; 
  color: #989898; 
} 
 
.sss {  
    position: absolute; 
    z-index: 100; 
    background-color: #1d42af; 
    padding: 10px; 
    padding-right: 50px; 
    color: white; 
} 
 
.sss::before { 
    content: ""; 
    width: 10px; 
    height: 10px; 
    display: block; 
    position: absolute; 
    top: 42px; 
    left: 29px; 
    border: 15px solid transparent; 
    border-top: 13px solid #1d42af; 
} 
 
.capabilities-caption { 
  width: 100px; 
  height: 100px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="header"> 
    <h1>My big company!</h1> 
  </div> 
  <ul class="menu"> 
    <li><a href="#">Home</a></li><li> 
    <a href="#" class="region-pointer">Services</a></li><li> 
    <a href="#" class="region-pointer">Portfolio</a></li><li> 
    <a href="#" class="region-pointer">About</a></li> 
  </ul> 
  <div class="container"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p> 
<button class="capabilities-caption"></button> 
    <p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet, porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p> 
 
    <p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p> 
    <button class="capabilities-caption"></button> 
    <p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p> 
     
    <p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p> 
     
    <p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p> 
     
    <p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p> 
    <p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p> 
     
    <p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p> 
     
<button class="capabilities-caption"></button> 
</div>

READ ALSO
Клик по ссылке на странице с помощью PhantomJS

Клик по ссылке на странице с помощью PhantomJS

Парсинг страницы с использованием PhantomJSЭтот код выводит все нужные ссылки

262
Можно с помощью метода jQuery изменять размеры окна браузера?

Можно с помощью метода jQuery изменять размеры окна браузера?

Можно с помощью метода jQuery изменять размеры окна браузера? Не могу найти такой метод, он существует?

233
Проблема с отправкой данных с помощью ajax в приложение на asp .net core

Проблема с отправкой данных с помощью ajax в приложение на asp .net core

Доброго времени сутокПроблема в том что в приложение не передаются данные из скрипта на js, вот код скрипта:

182