Die Höhe des sichtbaren Window-Bereich

messmar

Erfahrenes Mitglied
Guten Morgen!

wie kann man die Höhe des sichtbaren Window-Bereiches bekommen?

Ich muss einen Div dynamisch im unteren Bereich des Windows platzieren, und zwar nur was
sichtbar ist, da der
Javascript:
$(window).height();
2550px ist und damit kann ich den DIV nicht mehr sehen... es rutscht ganz unten.

Javascript:
var windw = this;

  $.fn.followTo = function ( elem ) {
  var $this = this,
  
  $window = $(windw),
  $bumper = $(elem),
  
  bumperPos = $bumper.offset().top,
  thisHeight = $this.outerHeight(),

  setPosition = function(){
  if ($window.scrollTop() > (bumperPos - thisHeight)) {
 
  $this.css({
  position: 'absolute',
  top: (bumperPos - thisHeight)
  });
  } else {
  $this.css({
  position: 'fixed',
  top: 0
  });
  }
  };

  /*$window.resize(function(){
  bumperPos = pos.offset().top;
  thisHeight = $this.outerHeight();
  setPosition();
  });*/

  $window.scroll(setPosition);
  setPosition();
  };

Aufruf:
Javascript:
var t = $("#anchor-point").offset().top;

  if($(this).scrollTop() > t){
  $('.wrapper-btn').show();
  $('.wrapper-btn-sticky').hide();
  }else if($(this).scrollTop() < t){
  $('.wrapper-btn').hide();
  $('.wrapper-btn-sticky').show();
  set = $(document).scrollTop() + "px";
  $('.wrapper-btn-sticky').animate({top:set},{duration:100,queue:false});
  $('.wrapper-btn-sticky').followTo('.hidden-scrollbar');
  }

z.B. das hier:
Javascript:
top: (bumperPos - thisHeight)
ersetzen...

Evtl. habe ich da ein Dingfelher oder Ähnliches.

Danke und Grüße
Messmar
 
Hi,

Danke!

Das kenne ich, und hatte ich schon ausprobiert. Aber es hat leider nicht geholfen...

Wenn ich den sichtbaren Bereich messe, dann habe ich: 902px.

Wenn ich aber alert mit
Javascript:
 $(document).height()
mach dann sind es: 2595px

Ratlos ;-(

Grüße
Messmar
 
Zuletzt bearbeitet:
Wenn ich den sichtbaren Bereich messe, dann habe ich: 902px.

Wenn ich aber alert mit
Javascript:
 $(document).height()
mach dann sind es: 2595px

Ratlos ;-(
Das eine hat auch nichts mit dem anderen zu tun.

Demnach entsprechen "902px" der inneren Fensterhöhe (Viewport-Höhe), und "2595px" der Dokumenthöhe, von denen sich "1693px" (= 2595-902) im nicht-sichtbaren Bereich des Fensters befinden.
 
Ok, Thx!

Wie kommt man dann dynamisch an Viewport Höhe? je nach window etc.?

Grüße
Messmar
 
aber bei dem
Javascript:
$(window).height()
ist doch dann 2595.

Ich lasse aber den folgenden Code Anfang der oben geposteter Funktion ausführen:

Javascript:
$('.wrapper-btn-sticky').css({
  'z-index' : '999',
  'border' : '2px solid blue',
  'margin-top' : $(window).height() 
  });

dann ist der DIV in Niemandsland und nicht sichtbar... und wenn ich folgendes schreibe:

Javascript:
$('.wrapper-btn-sticky').css({
  'z-index' : '999',
  'border' : '2px solid blue',
  'margin-top' : $(window).height() - 1800
  });
dann passt genau im bottom, wo es sein muss... nur das ist nicht die Lösung, weil der Screen und Window sich
unterscheidet vom user zu user.

das hier:
Javascript:
set = $(document).scrollTop() + "px";
  $('.wrapper-btn-sticky').animate({top:set},{duration:100,queue:false});
habe ich in

Javascript:
set = $(window).height() + "px";
  $('.wrapper-btn-sticky').animate({top:set},{duration:100,queue:false});
umgeschreiben, geht's aber auch nicht ;-( ;-(

Es wäre klasse, wenn ne(r) mir bitte helfen könnte!

Güße
Messmar
 
Anbei screenshots.. statt div_top.jpg will ich div_bottom.jpg erreichen.

DANKE!
 

Anhänge

  • div_bottom.jpg
    div_bottom.jpg
    75,1 KB · Aufrufe: 20
  • div_top.jpg
    div_top.jpg
    76,7 KB · Aufrufe: 18
Zurück