# Die Höhe des sichtbaren Window-Bereich



## messmar (15. Mai 2015)

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

```
$(window).height();
```
2550px ist und damit kann ich den DIV nicht mehr sehen... es rutscht ganz unten.


```
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:

```
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: 
	
	
	



```
top: (bumperPos - thisHeight)
```
 ersetzen...

Evtl. habe ich da ein Dingfelher oder Ähnliches.

Danke und Grüße
Messmar


----------



## SpiceLab (15. Mai 2015)

messmar hat gesagt.:


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


Mit jQuery: https://api.jquery.com/height/

Ohne jQuery: http://wiki.selfhtml.org/wiki/JavaScript/Objekte/window/innerHeight


----------



## messmar (15. Mai 2015)

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 
	
	
	



```
$(document).height()
```
mach dann sind es: 2595px

Ratlos ;-(

Grüße
Messmar


----------



## SpiceLab (15. Mai 2015)

messmar hat gesagt.:


> Wenn ich den sichtbaren Bereich messe, dann habe ich: 902px.
> 
> Wenn ich aber alert mit
> 
> ...


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.


----------



## messmar (15. Mai 2015)

Ok, Thx!

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

Grüße
Messmar


----------



## SpiceLab (15. Mai 2015)

messmar hat gesagt.:


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


Das haben wir doch schon erörtert?!

```
$(window).height();
```

Vielleicht willst du aber eher auf https://api.jquery.com/offset/ hinaus?


----------



## messmar (15. Mai 2015)

aber bei dem 
	
	
	



```
$(window).height()
```
 ist doch dann 2595.

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


```
$('.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:


```
$('.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:

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


```
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


----------



## messmar (15. Mai 2015)

Anbei screenshots.. statt div_top.jpg will ich div_bottom.jpg erreichen.

DANKE!


----------



## SpiceLab (15. Mai 2015)

messmar hat gesagt.:


> aber bei dem
> 
> 
> 
> ...


Bist du dir sicher? Das klang nämlich eben noch ganz anders:


messmar hat gesagt.:


> Wenn ich den sichtbaren Bereich messe, dann habe ich: 902px.
> 
> Wenn ich aber alert mit
> 
> ...


----------



## messmar (15. Mai 2015)

Ja, soweit ich das Ding debuggen konnte...


----------



## SpiceLab (15. Mai 2015)

messmar hat gesagt.:


> Anbei screenshots.. statt div_top.jpg will ich div_bottom.jpg erreichen.


Und das völlig unabhängig von der aktuellen Höhe des Viewports:

```
$('.wrapper-btn-sticky').css({
  'z-index' : '999',
  'border' : '2px solid blue',
  'position' : 'absolute',
  'bottom' : '0'
  });
```
Alternativ zu *absolute* könnte hier auch *fixed* erwünscht sein.


----------



## messmar (15. Mai 2015)

Thx! wird trotzdem und weiterhin oben eingebettet.. ich denke der Fehler könnteda sein: 


```
....
set = $(document).scrollTop() + "px";
$('.wrapper-btn-sticky').animate({top:set},{duration:100,queue:false});
.....
```

set is dann 0 und daher auch so ;-(


----------



## SpiceLab (15. Mai 2015)

Und wenn darin *top* entsprechend der vorgenommenen Positionierung in *bottom* gewandelt wird?

Falls damit das Fixieren des Elements beim Scrollen erzielt werden soll, würde dies *position:fixed* schon erledigen


----------



## messmar (15. Mai 2015)

Sry, die Frage nochmal, aber meinst Du so:

```
$('.wrapper-btn-sticky').animate({bottom:set},{duration:100,queue:false});
```

bottom gibt's nicht als eingeschaft für animate - soweit ich recherchiert hab.

Thx!


----------



## SpiceLab (15. Mai 2015)

messmar hat gesagt.:


> bottom gibt's nicht als eingeschaft für animate - soweit ich recherchiert hab.


Falsch bzw. unzureichend recherchiert:


			
				"Animation Properties and Values" hat gesagt.:
			
		

> All animated properties should be animated to a _single numeric value_, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color plugin is used). Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.


und weiter:


> Directional properties (top, right, bottom, left) have no discernible effect on elements if their position style property is static, which it is by default.


Zitatquelle: http://api.jquery.com/animate/

Trifft meine Annahme zu, oder nicht?


SpiceLab hat gesagt.:


> Falls damit das Fixieren des Elements beim Scrollen erzielt werden soll, würde dies *position:fixed* schon erledigen


----------



## messmar (15. Mai 2015)

Sry Sry, stimmt... was bottom als Eigenschaft angeht. Hast Recht!

Dann passiert aber trotzdem nichts... da ist der DIV nicht mehr sichtbar.

Thx!


----------



## SpiceLab (15. Mai 2015)

Könntest du bitte auch auf meine Rückfrage eingehen? 

Wenn du sie mit "Ja" beantworten kannst, ist die Problemstellung nämlich obsolet!


----------



## messmar (15. Mai 2015)

Sry, das ist keine Absicht... bin nur ein wenig im Streß ;-(

Nein, ich will es nicht fixieren, sondern beim scrollen, muss der DIV immer im unteren SICHTBAREN Bereich bleiben bis ich einen bestimmten
Punkt (Ende eines anderen DIVs) erreicht habe. 

Danke für die Geduld!


----------



## SpiceLab (15. Mai 2015)

Naja, Streß hin oder her, soviel Zeit sollte immer sein, die Beiträge aufmerksam zu lesen, und darauf zu reagieren, wenn eine Annahme und  (Rück)Frage auftaucht.

Das Beste wird wohl sein, wenn du das komplette Beispiel auf http://jsfiddle.net zeigst.


----------



## SpiceLab (15. Mai 2015)

messmar hat gesagt.:


> Nein, ich will es nicht fixieren, sondern beim scrollen, muss der DIV immer im unteren SICHTBAREN Bereich bleiben bis ich einen bestimmten
> Punkt (Ende eines anderen DIVs) erreicht habe.


Klingt sehr wohl nach position:fixed, aber eben nur bis zu einem gewissen (Zeit)Punkt 

Und was soll mit dem Objekt dann passieren? Wie soll es sich verhalten?


----------



## messmar (18. Mai 2015)

Sry Leute,

@SpiceLab: du hast Recht bzgl. deiner letzten Anmerkung am Freitag, aber nichtsdestotrotzt, es gibt manchmal Situationen, wo es einfach nicht hinhaut. Deine Tipps waren zwar richtig, aber folgendes:  ;-(

Ich habe jetzt rausgefunden, dass mein Code sauber ist/funkt. und das der Bug, seitens der anderen Seite - so zusagen, ist.

Ich binde nämlich meinen Code bzw. mein Formular dynamisch innerhalb einer anderen Seite, die ich via:
<c:import url="http://www.anderesSeite.de/folder/" /> lade...

Die andere Seite beinhaltet einen DIV, wo ich meinen Content folgendermassen einbette:


```
var $container = $('body').find('main');
  $('body').find('main').css({
  'height':'auto',
  'min-height': '1530px'
  });
  $container.load("inc/form_remotebox.jsp", {
  'action': '${param.success}'
  });
```

Meine Seite hat natürlich kein HTML, HEAD, und BODY Tags... diese kommen natürlich von der anderen Seite, wo mein Code eingebettet wird.

Meine Seite funkt. ohne deren Code - wenn ich eigene HTML, HEAD, BODY Tags einbette einwandfrei mit dem Code, den ein paar mal hier gepostet habe.

Könnte es daran legen, dass die Fremde Seite ne body tag property hat, die den standrad:

```
$(window).height()
```
 und/oder 
	
	
	



```
$(document).height()
```
beinflusst oder Ähnliches?

Ich erhalte keine Fehlermeldung oder JavaScript Konflikt etc.

Ich will eigentlich erreichen, dass das Formular-Teil mit Email und Button STICKY ist und zwar im 
unteren Rand des Sichbarem Browserfenster. Aber nur bis ein besstimmter DIV erscheint, dann soll der Sticky-Bereich verschwinden und statt dessen das nicht Sticky Formular-Teil.

Es gibt einige Beispiele im Netz, aber ich will hier keine Werbung für irgendwelche Protale machen.

Vielen Dank und Grüße
Messmar


----------

