[ERLEDIGT] logo und header

[janosh]

hab da ein kniffliges problem. in meiner mobilen ansicht habe ich eine wort-bild-marke in meinem header und einen burger-button. der button ist zu vernachlässigen, denke ich. wenn man nun scrollt oder durch einen ankerpunkt nach unten geleitet wird, soll sich mein header von 120px in der höhe, auf 60 px verringern und das logo soll durch ein anderes ersetzt werden, welches nur noch die bildmarke zeigt. zudem ist der header fix und es muss bei beiden höhen verhindert werden, dass der content unter den header rutscht.

 

[scbawik]

hab da ein kniffliges problem. in meiner mobilen ansicht habe ich eine wort-bild-marke in meinem header und einen burger-button. der button ist zu vernachlässigen, denke ich. wenn man nun scrollt oder durch einen ankerpunkt nach unten geleitet wird, soll sich mein header von 120px in der höhe, auf 60 px verringern und das logo soll durch ein anderes ersetzt werden, welches nur noch die bildmarke zeigt. zudem ist der header fix und es muss bei beiden höhen verhindert werden, dass der content unter den header rutscht.

$(window).scroll(function () {
  if($(this).scrollTop() <= 0) {
    $('body').addClass('is-scrolled-top');
  } else {
    $('body').removeClass('is-scrolled-top');
  }
});

Und auch hier wieder mit Media Queries auf die entsprechende Klasse reagieren - wie im anderen Thread beschrieben:

@media ... {
  body.is-scrolled-top header {
    height:60px;
  }
  // usw.
}

 

[janosh]

$(window).scroll(function () {
  if($(this).scrollTop() <= 0) {
    $('body').addClass('is-scrolled-top');
  } else {
    $('body').removeClass('is-scrolled-top');
  }
});

Und auch hier wieder mit Media Queries auf die entsprechende Klasse reagieren - wie im anderen Thread beschrieben:

@media ... {
  body.is-scrolled-top header {
    height:60px;
  }
  // usw.
}

also, dass, was der chrome in der handyansicht mit dem logo und header macht, hätte ich gerne, wenn ich runterscrolle. momentan greift ja die funktion nur, wenn ich einmal runter gescrollt habe und dann wieder rauf. hätte gern, wenn die seite aufgerufen wird, dass der header 120px hoch ist und das logo mit dem kopf und schriftzug zu sehen ist. beim runterscrollen, soll dann der header 80px hoch sein und nur der kopf zu sehen sein. und wenn man wieder oben angekommen ist, wieder die ausgangsposition.

[Link auf Wunsch entfermt]