Quantcast
Channel: Serif Software Forums (Closed) - WebPlus
Viewing all articles
Browse latest Browse all 4745

WebPlus X6: Tutorial: Scrolling and Sticky Panel

$
0
0
This is where an object on the page scrolls with the page until it gets to the top of the viewport. It then sticks there while the page continues to scroll.

After carrying out a number of tests, its finally in a WYSIWYG format with minmal coding, and uses a transparent panel.

Demo and downloadable .wpp file

For those who just need the script, use the Install notes from the demo and paste the following into page head, in an HTML fragment.

HTML Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type='text/javascript'>
function moveScroller() {
    var move = function() {
        var st = $(window).scrollTop();
        var ot = $("#panel-anchor").offset().top;
        var s = $("#scroller");
        if(st > ot) {
            s.css({
                position: "fixed",
                top: "0px"
 
 
            });
        } else {
            if(st <= ot) {
                s.css({
                    position: "relative",
                    top: ""
 
                });
            }
        }
    };
    $(window).scroll(move);
    move();
}
$(function() {
    moveScroller();
  });
</script>



Joe

Viewing all articles
Browse latest Browse all 4745

Trending Articles