Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Something like this (tested on Chrome) will work:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Example&lt;/title&gt; &lt;style&gt; .banner {position: absolute; top: 40px; left: 50px; background-color:cyan} &lt;/style&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" /&gt; &lt;script type="text/javascript" &gt; $(function() { $(window).scroll(function() { var top = $(window).scrollTop(); if (top &lt; 40) top= 40; $('.banner').css({top: top}) }) }) &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="banner"&gt;This is the banner&lt;/div&gt; &lt;div class="content"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;br/&gt;&lt;br/&gt;&lt;br/&gt; Cras rhoncus euismod sagittis.&lt;br/&gt;&lt;br/&gt;&lt;br/&gt; Fusce tincidunt consectetur ante eu commodo.&lt;br/&gt;&lt;br/&gt;&lt;br/&gt; Fusce lacinia consectetur nulla sit amet mattis.&lt;br/&gt;&lt;br/&gt;&lt;br/&gt; In viverra bibendum nibh vitae pharetra.&lt;br/&gt;&lt;br/&gt;&lt;br/&gt; Nam non eros semper ipsum facilisis fringilla.&lt;br/&gt;&lt;br/&gt;&lt;br/&gt; Phasellus sit amet purus interdum arcu hendrerit sagittis.&lt;br/&gt;&lt;br/&gt;&lt;br/&gt; Sed fermentum, orci non tincidunt pellentesque, tellus ipsum ultrices dui, at venenatis mi turpis non odio.&lt;br/&gt;&lt;br/&gt;&lt;br/&gt; Etiam elementum massa eu libero molestie nec pulvinar lacus suscipit.&lt;br/&gt;&lt;br/&gt;&lt;br/&gt; Etiam erat massa, mattis et sollicitudin eu, posuere commodo ligula.&lt;br/&gt;&lt;br/&gt;&lt;br/&gt; Vestibulum nec sem arcu.&lt;br/&gt;&lt;br/&gt;&lt;br/&gt; Vestibulum justo risus, feugiat at tristique a, sagittis vel dui.&lt;br/&gt;&lt;br/&gt;&lt;br/&gt; Sed enim erat, scelerisque sit amet accumsan scelerisque, vestibulum vitae dui.&lt;br/&gt;&lt;br/&gt;&lt;br/&gt; Integer et orci enim.&lt;br/&gt;&lt;br/&gt;&lt;br/&gt; Aliquam est mauris, consequat sed egestas vitae, scelerisque non sapien.&lt;br/&gt;&lt;br/&gt;&lt;br/&gt; Nam feugiat diam eu elit dignissim commodo.&lt;br/&gt;&lt;br/&gt;&lt;br/&gt; Curabitur eleifend lacus a leo vehicula rhoncus.&lt;br/&gt;&lt;br/&gt;&lt;br/&gt; Fusce luctus antequis urna sodales vestibulum.&lt;br/&gt;&lt;br/&gt;&lt;br/&gt; Aliquam tempus nisl vitae arcu bibendum sollicitudin.&lt;br/&gt;&lt;br/&gt;&lt;br/&gt; &lt;/body&gt; </code></pre> <p>Edit: positioning the element 40 px under the title, but making it visible if the user scrolls down</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload