fixed and floating region

Question

dougalmaguire 0 Newbie Poster

12 Years Ago

Hi all,

I have region which initially needs to be fixed in a certain position. After data is returned to the page and the user scrolls down to the bottom instead of remaining in its fixed postion I want my region to float to the top of the page, if I scroll right back to the top I want the region to revert to its original position.

I found a very handy demo that did what I want ( http://fiddle.jshell.net/zsJAr/show/light/) BUT it uses JQuery and I am unable to use JQuery in my pages. :(

Does anyone know how I can replicate what this demo was but without JQuery?

p.s. we are using script.aculo.os and prototype but I can't seem to find anything similar.

Thanks in Advance

javascript

2 Contributors
3 Replies
110 Views
1 Day Discussion Span
Latest Post 12 Years Ago Latest Post by dougalmaguire

All 3 Replies

Taywin 312 Posting Virtuoso

12 Years Ago

Please use "code" tag next time... Here is my pure JavaScript version.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Scroller example - jsFiddle demo</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>


<link rel="stylesheet" type="text/css" href="/css/result-light.css">

<style type='text/css'>
body {
width: 960px;
}
#mainbar {
width: 660px;
float: left;
}
#sidebar {
width: 270px;
float: right;
}
#scroller {
width: 270px;
}
#footer {
clear: both;
}

</style>

<script type='text/javascript'>
function dispScroll() {
  var readElem = document.getElementById("sidebar")
  if (readElem.offsetTop<getScrollYPos()) {
    readElem.style.position = "fixed"
    readElem.style.top = "10px"  // watch out for IE when you add "px"
    readElem.style.right = "0px" // watch out for IE when you add "px"
  }
  else {
    readElem.style.position = "relative"
    readElem.style.top = ""
    readElem.style.right = ""
  }
}

function getScrollYPos() {
  return window.pageYOffset
  // for IE 8 and below, needs to compute zoom value from
  // boundary value of document.body.getBoundingClientRect comparing with
  // real width from document.body.offsetWidth;
}
</script>


</head>
<body onscroll="dispScroll()">
<h1>Scroller demo</h1>

<div id="mainbar">
 <script type="text/javascript">
 var el = document.getElementById("mainbar")
 var str = ""
 for (var i=0; i<1024; i++) {  // 2048 characters
   str += "a "
 }
 el.innerHTML = ""
 for (var i=0; i<12; i++) {  // 12 paragraphs
   el.innerHTML = el.innerHTML + "<p>"+str+"</p><br>"
 }
 </script>
</div>

<div id="sidebar" style="width:270px;">
<div id="scroller-anchor"></div>
<div id="scroller" style="margin-top:10px; width:270px">
This content will remain fixed to the browser window, but not if
you're too close to the top of the page.<br />
</div>
</div>

<div id="footer">
Shamelessly stolen from Stack Overflow.
</div>

</body>


</html>

Edited 12 Years Ago by Taywin because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

dougalmaguire 0 Newbie Poster · Answer 1 · 2011-10-28T13:37:27+00:00

This is the html code

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Scroller example - jsFiddle demo</title>
  <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>


  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
      body {
    width: 960px;
  }
  #mainbar {
    width: 660px;
    float: left;
  }
  #sidebar {
    width: 270px;
    float: right;
  }
  #scroller {
    width: 270px;
  }
  #footer {
    clear: both;
  }

  </style>

  <script type='text/javascript'>
  //<![CDATA[ 
  $(window).load(function(){
  $(function() {
  var a = function() {
    var b = $(window).scrollTop();
    var d = $("#scroller-anchor").offset({scroll:false}).top;
    var c=$("#scroller");
    if (b>d) {
      c.css({position:"fixed",top:"0px"})
    } else {
      if (b<=d) {
        c.css({position:"relative",top:""})
      }
    }
  };
  $(window).scroll(a);a()
});
  });
  //]]> 
  </script>


</head>
<body>
  <h1>Scroller demo</h1>

<div id="mainbar">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
non tortor eros, nec rhoncus nulla. In fringilla, dui vel vehicula
luctus, nunc arcu ultricies nisi, eu adipiscing sapien orci nec
justo. Nulla facilisis gravida tempus. Nunc interdum, dolor sed
euismod rutrum, odio turpis rutrum odio, iaculis venenatis nunc sem eu
dui. Nulla venenatis, leo quis porta luctus, ipsum ipsum tempus nunc,
in fermentum arcu odio non ipsum. Vivamus bibendum pulvinar sapien a
cursus. Nullam lobortis nibh eget odio placerat hendrerit. In non leo
turpis, quis posuere augue. Mauris auctor commodo quam, quis vulputate
orci tincidunt et. Nulla tellus lectus, rhoncus ut malesuada eget,
auctor ac ligula. Suspendisse mollis tempus interdum. Proin non velit in
lectus elementum interdum eu eget velit. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Nam
lobortis, est ac elementum tincidunt, lacus dolor lacinia erat, eget
ullamcorper augue justo in lectus. Aliquam eros felis, fringilla sed
cursus sit amet, consectetur nec tellus. Vestibulum ultricies auctor
erat, ac facilisis felis fermentum id.

<p>
Quisque sed rhoncus dolor. Nullam hendrerit justo non lacus rutrum
vitae pellentesque velit adipiscing. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus
pulvinar ultricies sapien, sed consectetur purus condimentum et. Nulla
viverra accumsan condimentum. Ut sodales, lacus sed varius porttitor,
odio ipsum tristique odio, ac sollicitudin est urna at sem. Aliquam
suscipit porta felis, sit amet aliquet justo ultricies ac. Proin a orci
et eros interdum dignissim. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Aenean vehicula malesuada
pretium. Suspendisse potenti. Nullam at felis quam. Donec gravida mi
et purus pretium vitae placerat lacus porttitor. Donec scelerisque
pellentesque sollicitudin. Nullam et lacinia urna. In velit magna,
malesuada quis iaculis a, auctor at felis. Quisque hendrerit aliquam
diam vel luctus. Vestibulum venenatis sapien at libero mattis mattis.

<p>
Etiam eu aliquet tellus. Cras malesuada ligula non urna auctor a
pretium lorem placerat. Quisque pulvinar turpis non nisi laoreet
fringilla. Proin mollis enim id nisi egestas eget varius metus
mattis. Nulla viverra dui quis velit gravida sodales. Nulla nec
nisi et ligula viverra eleifend. Aliquam ac lectus at nunc mattis
volutpat. Suspendisse elit lorem, gravida nec lobortis non, venenatis
nec odio. Vestibulum et luctus sapien. Donec faucibus blandit urna,
nec convallis metus aliquam suscipit. Curabitur fermentum purus ornare
mauris auctor tristique. Cras vel magna sit amet felis tempor dapibus
nec id turpis. Duis eu tortor lorem. Nulla dapibus pellentesque enim
lobortis feugiat. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Morbi iaculis sem ut erat sodales non
elementum elit bibendum. Duis ut mi tellus. Integer consequat ligula
mattis tortor aliquam ut hendrerit lacus tempus. Quisque suscipit magna
nec nulla accumsan sit amet tempor nisi gravida.


<p>
Mauris pulvinar tortor id justo feugiat ultrices. Vestibulum vel
ante orci, a venenatis tortor. Duis urna erat, imperdiet iaculis
facilisis eu, convallis et dolor. Suspendisse mauris ligula, luctus a
pellentesque vitae, rhoncus eu lectus. Morbi eget leo sed magna varius
pretium quis sit amet lectus. Nunc sagittis molestie congue. Donec
aliquet vestibulum dui, non placerat massa pharetra at. Maecenas ac
massa elit, eget venenatis elit. Nullam elementum aliquet nisi, eu
luctus libero fringilla sed. Maecenas vitae mauris nisi, a egestas
lectus. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Donec lobortis malesuada libero, a
tempus tortor auctor et. Vestibulum iaculis eleifend neque, et consequat
augue adipiscing sit amet. Integer sodales dictum nibh et suscipit. In
congue sollicitudin erat et imperdiet.

<p>
Proin tellus enim, bibendum a sollicitudin non, accumsan at
nisl. Phasellus vulputate elementum ligula a volutpat. Etiam scelerisque
sollicitudin massa id convallis. Duis bibendum molestie tempus. Vivamus
lacinia accumsan quam, at aliquam mauris ultrices at. Sed malesuada
faucibus massa, lobortis pharetra diam accumsan a. Curabitur dignissim
nunc vitae erat laoreet a laoreet sem bibendum. Etiam eu varius
erat. Integer porttitor porta tincidunt. Nam dictum tellus bibendum
tellus interdum ullamcorper. Phasellus justo lorem, semper in vehicula
interdum, vestibulum ac purus. Integer hendrerit lectus at nisi luctus
aliquet. Donec consectetur nisi vel metus viverra porttitor vel non
lectus. Proin eget enim sagittis ligula mattis posuere ut varius
ligula. Mauris euismod tempus sem nec pretium. Donec congue suscipit
libero, id pretium dolor luctus sed. Donec sed metus id nulla tempor
vulputate non vel nisl. Vestibulum a turpis vitae leo commodo pulvinar
eu vitae enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<div id="sidebar" style="width:270px;"> 
  <div id="scroller-anchor"></div> 
  <div id="scroller" style="margin-top:10px; width:270px"> 
    This content will remain fixed to the browser window, but not if
    you're too close to the top of the page.
  </div>
</div>

<div id="footer">
  Shamelessly stolen from Stack Overflow.

</div>


</body>


</html>

dougalmaguire 0 Newbie Poster · Answer 2 · 2011-10-28T20:59:41+00:00

dougalmaguire 0 Newbie Poster

12 Years Ago

Thanks Taywin dude, you're a star.

fixed and floating region

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers