0

I have a div on the right side of my content, using float:right;

The width of the div is fixed (265px), but the height is variable (it contains data filled up with php).

What I'm trying to achieve: if the div is NOT heigher then the browser window AND the width is completely visible (when the browser window is wide enough), the div should be position:fixed. In other cases it should be position:absolute, so the user can read everything after scrolling.

After reading some articles, including this one => Check if element is visible after scrolling, I was able to create something, but I'm not able to make it perfect.

There is always something that goes wrong. Either by scrolling fast, or resizing 

        function setPositionKasticket()
        {
            var docViewTop  = $(window).scrollTop();
            var docViewLeft = $(window).scrollLeft();
            //var docViewTop  = window.pageXOffset;
            //var docViewLeft = window.pageYOffset;

            var docViewBottom = docViewTop + $(window).height();
            var docViewRight  = docViewLeft + $(window).width();

            var elemTop  = $("#kasticket").offset().top;
            var elemLeft = $("#kasticket").offset().left;

            var elemBottom = elemTop + $("#kasticket").height();
            var elemRight  = elemLeft + $("#kasticket").width();

            if ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <= docViewBottom) && (elemTop >= docViewTop) &&
                (elemRight  >= docViewLeft) && (elemLeft <= docViewRight) && (elemRight <= docViewRight) && (elemLeft >= docViewLeft))
            {    
                $("#kasticket").css({position: 'fixed'});
            }
            else
            {
                $("#kasticket").css({position: 'absolute'});
            }
        }

        window.onscroll=function(){
            //setPositionKasticket();

            //$("#kasticket").css({top: window.pageYOffset + 160});

            if (($('#kasticket').css('position') == 'absolute') && (checkHeigth()))
            {
               $("#kasticket").animate({top: window.pageYOffset + 160},2);
            }
        }

        window.onresize=function(){
            setPositionKasticket();
        }

        window.onload=function(){
            setPositionKasticket();
        }
Community
  • 1
  • 1
diedie2
  • 366
  • 1
  • 6
  • 17
  • 1
    Can you make jsfiddle? – Vishwanath Aug 20 '14 at 09:56
  • You can leave the element as fixed and set it to `overflow: auto` or `overflow: scroll` to enable users to access content below the fold. – ralph.m Aug 20 '14 at 10:07
  • tnx for the tip @ralph.m, but it destroys this => http://stackoverflow.com/questions/24386147/jagged-edges-with-transparant-background-in-css – diedie2 Aug 20 '14 at 11:59
  • I was unable to create a jsfiddle, but I have a page online showing it => http://itreflex.be/decastro/online.php. With a high resolution and browserwindow maximized, you'll see the ticket on the right with position:fixed. Resize your browser and scroll again. You'll see it's position:absolute now. So far so good. Now make your window as heigh as possible, but smaller, lets say 1280. Now scroll to the right so you see the ticket completely again. At this moment, I want the ticket to be position:fixed again (or similar, like I tried with the jQuery animation), but I fail in this part. – diedie2 Aug 20 '14 at 12:06

0 Answers0