Gezocht: script om afbeelding "vast" te houden op het scherm

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

George van Baasbank

George van Baasbank

05/10/2012 16:58:05
Quote Anchor link
Hallo allemaal,

Ik ben op zoek naar een script, JS of JQuery, die een afbeelding vast laat staan op een (start)positie op het scherm ondanks dat er met het scherm gescrolld wordt. De afbeelding blijft dus altijd in beeld.

Wie heeft er een suggestie voor mij? Op de door mij ontwikkelde genealogiesite moet ik familieberichten koppelen aan personen die met elkaar wel een rij van 100 personen kunnen vormen.


George
 
PHP hulp

PHP hulp

25/11/2024 16:54:20
 
Veur Heur

Veur Heur

05/10/2012 17:05:13
Quote Anchor link
Gewoon een position:fixed geven met css.
 
George van Baasbank

George van Baasbank

05/10/2012 17:45:36
Quote Anchor link
Hoi Opolo,

Dit werkt goed maar is weol erg "vast". Ik zocht meer in de oplossing dat het plaatje tot aan de bovenkant van het scherm mee scrollt en daarna vast komt te staan.
 
Kris Peeters

Kris Peeters

05/10/2012 18:43:05
Quote Anchor link
Wel een leuk probleem.

Dit heb ik vlug even in mekaar gestoken.

En zonder jQuery :)

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!doctype html>
<html>
    <head>
    <style>
        #banner {
            position: absolute;
            z-index: 5;
        }
    </style>
    <script>
    window.onload = function() {
      var a = document.getElementById("banner");
      addEvent( window, 'scroll', function() {  
        if (a.offsetTop < window.pageYOffset) {
          a.style.top = window.pageYOffset + 'px';
            }
        else {
          a.style.top = 'auto';
        }
      });    
    };

        
    /*
    * Add event
        * zie ook http://www.phphulp.nl/php/forum/topic/utilsjs/85665/last/
    *  @see http://net.tutsplus.com/tutorials/javascript-ajax/from-jquery-to-javascript-a-reference/
    *  @author: Jeffrey Way
    // Example of Usage  
    var lis = document.getElementsByTagName('li');  
    addEvent( lis, 'click', function() {  
        this.style.border = '1px solid red';  
    });  
    */
    var addEvent = (function( window, document ) {  
        if ( document.addEventListener ) {  
            return function( elem, type, cb ) {  
                if ( (elem && !elem.length) || elem === window ) {  
                    elem.addEventListener(type, cb, false );  
                }  
                else if ( elem && elem.length ) {  
                    var len = elem.length;  
                    for ( var i = 0; i < len; i++ ) {  
                        addEvent( elem[i], type, cb );  
                    }  
                }  
            };  
        }  
        else if ( document.attachEvent ) {  
            return function ( elem, type, cb ) {  
                if ( (elem && !elem.length) || elem === window ) {  
                    elem.attachEvent( 'on' + type, function() { return cb.call(elem, window.event) } );  
                }  
                else if ( elem.length ) {  
                    var len = elem.length;  
                    for ( var i = 0; i < len; i++ ) {  
                        addEvent( elem[i], type, cb );  
                    }  
                }  
            };  
        }  
    })( this, document );
    </script>
    </head>
    <body>
        <br>$<br>$<br>$<br>$<br>$<br>$
        <br>$<br>$<br>$<br>$<br>
        Tekst boven de banner
        <br>
        <img id="banner" src="http://mitosoc.org/blogs/wp-content/themes/Cutline2pt1/images/header.jpg">
        <div id="control"></div>
                <br>$<br>$<br>$<br>$<br>$<br>$
        <br>$<br>$<br>$<br>$<br>$<br>$
        <br>$<br>$<br>$<br>$<br>$<br>$
        <br>$<br>$<br>$<br>$<br>$<br>$
        <br>$<br>$<br>$<br>$<br>$<br>$
        <br>$<br>$<br>$<br>$<br>$<br>$
    </body>
</html>
Gewijzigd op 05/10/2012 18:48:53 door Kris Peeters
 
George van Baasbank

George van Baasbank

06/10/2012 11:29:40
Quote Anchor link
Kris,

Bedankt voor je vele werk. De routine werkt maar (nog) niet helemaal naar wens.

1. De afbeelding staat teveel naar rechts. Waar stel ik de x-as in?
2. De afbeelding blijft voor een deel onzichtbaar aan de onderkant. Wat ik eigenlijk wil is dat de BOVENKANT van de afbeelding niet hoger komt dan de BOVENKANT van het beeldscherm.


George

Toevoeging op 06/10/2012 11:34:28:

Kijk eens naar de site http://www.bonque.nl/vacature/senior-php-programmeur-5?utm_source=phphulp en dan aan de linkerkant van het scherm. Het info-kader blijft boven in het scherm hangen.

George
 
Kris Peeters

Kris Peeters

06/10/2012 12:28:46
Quote Anchor link
George van Baasbank op 06/10/2012 11:29:40:
... Kijk eens naar de site http://www.bonque.nl/vacature/senior-php-programmeur-5?utm_source=phphulp



De Header
Zij hebben een tweede header die onzichtbaar is bij wanneer de scroll < 250px is, maar verder wel een strikt vaste positie heeft.
Dat maakt het wat gemakkelijker.

Wat zij doen, staat op
http://www.bonque.nl/Content/View1/scripts/main.js lijn 771 en verder.
(Trouwens, die auteur spreekt Nederlands; lees zelf de "licensed under a Creative Commons ...")

Dit is de basis van wat ze doen:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<html>
  <head>
    <style>
      .tiny-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        display: none;
        background: #EC2E56;
        height: 30px;
        z-index: 110;
      }
      .blok {
        /* dit is gewoon bladvulling */
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="tiny-header">
      Verborgen header
    </div>
    
    <div class="blok">*</div>
    <div class="blok">*</div>
    <div class="blok">*</div>
    <div class="blok">*</div>
    <div class="blok">*</div>
    <div class="blok">*</div>
    <div class="blok">*</div>
    <div class="blok">*</div>
    <div class="blok">*</div>
    <div class="blok">*</div>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>
      $(document).ready(function($) {
        $(window).scroll(function(e) {
            var posTop = $(this).scrollTop();
            if (posTop > 250) {
              $('.tiny-header').fadeIn();
            } else {
              $('.tiny-header').fadeOut();
            }
        });        
      });
    </script>  
  </body>
</html>



Dat dan gecombineerd met:
Een klik op die verborgen header (nu ja, op de link), zorgt er voor dat die header groter wordt en de inhoud van de grote header bovenaan krijgt...
wat op zich ook een piece of cake is.

Die box links:

De code doet ongeveer wat ik deed in mijn eerste post. Maar met vooral 1 grote extra: een vertraging; een setTimeout die maakt dat het effect niet onmiddellijk gebeurt.

Je moet zien dat je css #floating-box een top-padding geeft (of zoiets), zodat het lijkt alsof de box niet helemaal aan de top plakt
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<html>
  <head>
    <style>
      .content {
        position: relative;
      }
      #floating-box {
        position: absolute;
        top: 0;
        width: 230px;
        z-index: 105;
        background: #F1F1F1;
      }
      .blok {
        /* dit is gewoon bladvulling */
        height: 100px;
      }
    </style>
  </head>
  <body>
      <div class="content">
        <div id="floating-box">
          1<br>2<br>3<br>4<br>5<br>6<br>
        </div>
        Hier de main content
        <div class="blok">*</div>
        <div class="blok">*</div>
        <div class="blok">*</div>
        <div class="blok">*</div>
        <div class="blok">*</div>
        <div class="blok">*</div>
        <div class="blok">*</div>
        <div class="blok">*</div>
    </div>
    
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>
      var scrollPos = 0;
      var scrollUp = false;
      var firstScroll = true;
      var floating_box = "#floating-box";
      var baseTop = 0;
      
      $(document).ready(function($) {
        baseTop = $(floating_box).size()>0 ? $(floating_box).offset().top : 0;
        var tr_menu = null;

        $(window).scroll(function(e) {
           if ($(floating_box).size() > 0) {
            if ($('.content').height() > $(floating_box).height()) {
              $(floating_box).css('position', 'absolute');
              clearTimeout(tr_menu);
              tr_menu = setTimeout(setSidebarPosition, 500);
            } else {
              $(floating_box).css('position', 'static').css('top', 0);
              firstScroll = false;
            }
          }
        });        
      });      
      function setSidebarPosition() {
        var posTop = $(this).scrollTop();
        // determine if scrolling up/down
        if (scrollPos > posTop) {scrollUp = true;} else {scrollUp = false;}
        scrollPos = posTop;

        var windowHeight = $(window).height();
        var objHeight = $(floating_box).height();

        var offset = 0;
        var objAbsoluteOffset = $(floating_box).offset().top;
        offset = $(document).scrollTop() - baseTop;
        if ( ((scrollUp) || (windowHeight > objHeight)) && ($('.content').height() - offset) > objHeight ) {
          // top fix
          if (offset < 0) offset = 0;
          // spacing for tiny-header
          if ($('.tiny-header').is(':visible')) offset += IE ? 25 : 40;
          // dont animate on first scroll
          if (firstScroll) {
            $(floating_box).css('top', offset);
            firstScroll = false;
            return false;
          }
          //$(floating_box).stop(true, true).animate({top:offset},{duration:1500, queue:false, easing:'easeInOutElastic'});
          $(floating_box).stop(true, true).animate({top:offset},{duration:400, queue:false});    
        } else {
          //console.log('scrolling down')
          // bij het scrollen naar beneden, wanneer de onderkant van het menu de onderkant van de pagina loslaat
          if ((scrollPos + windowHeight) > (objAbsoluteOffset + objHeight)) {
            //if (scrollPos > $('.articles').height()) scrollPos = $('.articles').height();
            offset = scrollPos - baseTop - objHeight + windowHeight;
            if ((offset + objHeight) > $('.content').height() - 100) offset = $('.content').height() - objHeight;
            $(floating_box).animate({top:offset},{duration:400, queue:false});
          }
          //console.log('offset:', offset);
        }    
        firstScroll = false;
      }
    </script>  
  </body>
</html>
Gewijzigd op 06/10/2012 13:28:56 door Kris Peeters
 
George van Baasbank

George van Baasbank

06/10/2012 13:57:20
Quote Anchor link
Kris,

Bedankt voor je uitzoekwerk. Ik ga nu een familiefeestje vieren dus kom even niet aan php/html toe. Wellicht morgen of maandag.
Ik ga e.e.a. uitproberen


George
 
Kris Peeters

Kris Peeters

06/10/2012 20:26:11
Quote Anchor link
Ik heb mijn eerste code nog eens bovengehaald en wat aangepast, zodat het ongeveer zoals die linker box lijkt.

Ik vind mijn code wel leuker.

Je kan lijn 32 in commentaar zetten en het commentaar bij lijn 31 weg doen. Dan krijg je de eenvoudige werking van function imageOnTop()
Maar function slideToPosition() lijkt me wel vrij flashy

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!doctype html>
<html>
    <head>
    <style>
        #floating_box {
            padding: 5px;
            padding-top: 20px;
            position: absolute;
            z-index: 5;
            width: 250px;
            left: 0;
        }
        #floating_box img{
            width: 100%;
        }
        #floating_box .inner{
            background-color: #A1D8B3;
            width: 100%;
        }
        #content {
          margin-left: 280px;
        }
        #header {
          background-color: #D8A1B3;
        }
                
    </style>
    <script>
    var floating_box;
    var timer;
    var topOfFloatingBox = 0;
    window.onload = function() {
        floating_box = document.getElementById("floating_box");
        topOfFloatingBox = floating_box.offsetTop;
        addEvent( window, 'scroll', function() {  
             clearTimeout(timer);
             //timer = setTimeout(imageOnTop, 500);
             timer = setTimeout(slideToPosition, 500);
        });    
    };
    function imageOnTop() {
      floating_box.style.top = (window.pageYOffset)+ 'px';
    }
    /*
    recursieve functie.  De functie leidt de div geleidelijk aan naar de juiste hoogte.
    Wanneer het scrollen stopt, is er een verschil tussen tussen de plaats waar de box is
    en waar ze moet zijn.  
    Dat verschil wordt met 15% verminderd en de functie wordt opnieuw uitgevoerd,
    met een setTimeout.
    Dit tot het verschil klein is.
    Dit geeft een vrij flashy effect
    */
    function slideToPosition() {
       var box = floating_box.offsetTop;
       var scroll = window.pageYOffset ;
       if (scroll <= topOfFloatingBox) {
         // geleidelijk naar de beginpositie vloeien
         var newPos = Math.floor(topOfFloatingBox - (topOfFloatingBox - box) * 0.85);
         floating_box.style.top = topOfFloatingBox + 'px';
         setTimeout(slideToPosition, 40);
       }
       else {
           // geleidelijk naar de  scroll-positie vloeien
           if (Math.abs(scroll - box) > 5) {
             var newPos = Math.floor(scroll - (scroll - box) * 0.85);
             floating_box.style.top = newPos + 'px';
             setTimeout(slideToPosition, 40);
           }
           else {
             floating_box.style.top = scroll + 'px';
           }
       }
    }    
    /*
    * Add event
    *  @see http://net.tutsplus.com/tutorials/javascript-ajax/from-jquery-to-javascript-a-reference/
    *  @author: Jeffrey Way
    // Example of Usage  
    var lis = document.getElementsByTagName('li');  
    addEvent( lis, 'click', function() {  
        this.style.border = '1px solid red';  
    });  
    */
    var addEvent = (function( window, document ) {  
        if ( document.addEventListener ) {  
            return function( elem, type, cb ) {  
                if ( (elem && !elem.length) || elem === window ) {  
                    elem.addEventListener(type, cb, false );  
                }  
                else if ( elem && elem.length ) {  
                    var len = elem.length;  
                    for ( var i = 0; i < len; i++ ) {  
                        addEvent( elem[i], type, cb );  
                    }  
                }  
            };  
        }  
        else if ( document.attachEvent ) {  
            return function ( elem, type, cb ) {  
                if ( (elem && !elem.length) || elem === window ) {  
                    elem.attachEvent( 'on' + type, function() { return cb.call(elem, window.event) } );  
                }  
                else if ( elem.length ) {  
                    var len = elem.length;  
                    for ( var i = 0; i < len; i++ ) {  
                        addEvent( elem[i], type, cb );  
                    }  
                }  
            };  
        }  
    })( this, document );
    </script>
    </head>
    <body>
        <div id="header">
            <br>$<br>$<br>$<br>$<br>$<br>$
            Tekst boven de floating box
        </div>
        <div id="floating_box">
          <div class="inner">
           <img src="http://mitosoc.org/blogs/wp-content/themes/Cutline2pt1/images/header.jpg">
           <ul>
             <li>bla</li><li>bla</li><li>bla</li>
           <ul>      
         </div>
       </div>
       <div id="content">
        <br>$<br>$<br>$<br>$<br>
        <br>$<br>$<br>$<br>$<br>$<br>$
        <br>$<br>$<br>$<br>$<br>$<br>$
        <br>$<br>$<br>$<br>$<br>$<br>$
        <br>$<br>$<br>$<br>$<br>$<br>$
        <br>$<br>$<br>$<br>$<br>$<br>$
        <br>$<br>$<br>$<br>$<br>$<br>$
      </div>
        
    </body>
</html>
Gewijzigd op 06/10/2012 20:42:44 door Kris Peeters
 
Wouter J

Wouter J

06/10/2012 20:28:27
Quote Anchor link
Over een paar maanden kun je eens kijken naar position: sticky; Zie ook http://wouterj.nl/css/css-bleeding-edge-sticky-positioneren/559/
 
George van Baasbank

George van Baasbank

07/10/2012 13:02:28
Quote Anchor link
Kris,

De afbeelding blijft keurig op zijn plaats en is wel zoiets als ik bedoel. Maar de afbeelding blijft in mijn geval aan de onderkant hangen en loopt niet mee naar de bovenkant van het scherm.
Ik heb een paar kleine aanpassingen gedaan (breedte enzo) maar het resultaat is nog niet wat ik graag zien wil.
Ik heb voor de ontwikkeling deze hyperlink vrijgegeven zodat je even kunt zien wat het resultaat is geworden: http://ov.vanbaasbank.nl/leden_koppelen.php?id=190

George
 
Kris Peeters

Kris Peeters

07/10/2012 13:56:06
Quote Anchor link
Die floating box is genest in een element met position: relative. Ik denk dat dit het probleem ten gronde is.

Ik denk vooral die:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
.container1 {
  position: relative;
  display: block;
  ...
}


Dat maakt dat dat het nieuwe nulpunt is voor de hoogte.

Is het mogelijk om die position: relative; weg te laten?

------
Ofwel

Probeer die floating box los te halen uit zijn parents.
Bv.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<div class="main-container">
  <header>...</header>
  <div id="floating_box"></div>
</div>



Die omliggende div is helemaal bovenaan
en dan met css de box positioneren.
Waarschijnlijk best met

left: ...px;
Top: ...px

of met margin-top ...

OF misschien kan het toch bij de bijbehorende bericht blijven, maar toch wat buiten een element met postiion: relative

---
Ofwel moet die code nog wat aangepast worden om daar ook rekening mee te houden

Wouter J op 06/10/2012 20:28:27:
Over een paar maanden kun je eens kijken naar position: sticky; Zie ook http://wouterj.nl/css/css-bleeding-edge-sticky-positioneren/559/

Zal ik doen.
Dit is inderdeed een probleem dat css zou moeten kunnen oplossen
Gewijzigd op 07/10/2012 14:14:36 door Kris Peeters
 
George van Baasbank

George van Baasbank

07/10/2012 14:42:28
Quote Anchor link
Ik kan in container1 geen postion: relative vinden.



Toevoeging op 07/10/2012 15:02:48:

Kris,

Ik heb de relative gevonden en verwijderd. De afbeelding komt nu beter in beeld. Nog wel niet helemaal goed. Tot op de helft van de pagina scrollt de afbeelding mee en daarna blijft deze hangen. Ik moet dus een instelling vinden waarbij de top wordt verkleind.


Toevoeging op 07/10/2012 15:22:26:

Kris,

Ik heb de code nu bijna op orde. De afbeelding gaat nu eigenlijk iets te vroeg naar het top of screen. Hij blijft nu netjes hangen aan de bovenkant tot het moment dat het oorspronkelijke scherm weer ontstaat.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function slideToPosition() {
       var box = floating_box.offsetTop;
       var scroll = window.pageYOffset ;
       if (scroll <= topOfFloatingBox) {
         // geleidelijk naar de beginpositie vloeien
         var newPos = Math.floor(topOfFloatingBox - (topOfFloatingBox - box + 50) * 0.85);
         floating_box.style.top = topOfFloatingBox + 'px';
         setTimeout(slideToPosition, 40);
       }
       else {
           // geleidelijk naar de  scroll-positie vloeien
           if (Math.abs(scroll - box) > 5) {
             var newPos = Math.floor(scroll - (scroll - box + 50) * 0.85);
             floating_box.style.top = newPos + 'px';
             setTimeout(slideToPosition, 40);
           }
           else {
             floating_box.style.top = scroll + 'px';
           }
       }
    }    


Dit is de regel die ik heb aangepast:

var newPos = Math.floor(scroll - (scroll - box + 50) * 0.85);
Gewijzigd op 07/10/2012 15:03:30 door George van Baasbank
 
Kris Peeters

Kris Peeters

07/10/2012 16:49:58
Quote Anchor link
ziet er goed uit
 
George van Baasbank

George van Baasbank

08/10/2012 09:45:29
Quote Anchor link
Kris,

De gebruikers van het scherm zijn dik tevreden.

Bedankt voor je ondersteuning.


George
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.