Autor Zpráva
Koukal
Profil *
Mám na stránce plovoucí div s tlačítkama uvnitř
div.floating { float:right;}
když roluju dolů po formuláři, tlačítka zmizí. Jak to udělat pomocí JQuery, aby se div vždy objevoval nahoře? Potřeboval bych ale aby se začal posouvat k hornímu okraji obrazovky teprve tehdy když se objeví fieldset.green:

// výše jsou další fieldsety
<fieldset class=green>
<legend>Čtvrtá část: Bližší zařazení slovíčka</legend>
<Label title='Kam zařadit slovo. Některé položky lze zvýraznit pomocí příslušného tlačítka. Tlačítko slouží na přepínání barev.'>Bližší okruh:</Label>
<div class=floating>
<input type=button class="highlight1" id="servis" value="Služba" onclick="switchStyle('servis')">
<input type=button value="Tělo" onclick="switchStyle('body')">
<input type=button value="Místo" onclick="switchStyle('lokace')">
<input type=button value="Látka" title="Materiály a oblékání" onclick="switchStyle('materials')">
<input type=button value="Čas" onclick="switchStyle('time')">
<input type=button value="Stavba" onclick="switchStyle('build')">
<input type=button value="City" title="Emoce" onclick="switchStyle('city')">
<input type=button value="Vztahy" title="Komunikace" onclick="switchStyle('komunikace')">
</div>
<p> 
// Níže pokračuje fieldset dlouhým seznamem radioboxů

</fieldset>
Kajman
Profil
Pomocí css vlastnosti sticky, to půjde v nových prohlížečích i bez javascriptu...
Živá ukázka
Koukal
Profil *
Tak to mě fungovat nebude protože já mám sice nový FF ale verzi 49.0.2 a XP novější nezvládnou. A podobně chci aby má stránka byla dostupná i pro lidi co používají starší OS nebo "starší" prohlížeč.


V tom FF to funguje, ale Chrome mám 49-0-26. Mohl bys pro mě prosím napsat nebo odkázat na univerzálnější funkci? Vždycky jsem bral ohled na starší uživatele, který moderní systém mít nemusí a právě ti starší lidi v důchodu jsou pro mě klíčoví uživatelé.
Koukal
Profil *
Už jsem našel nějaký kód:
stickyjs.com
ale ještě potřebuju vymyslet jak to udělat aby se to aktivovalo jen když je vidět ten správný fieldset


Tak to funguje perfektně.
Koukal
Profil *
sticky je nespolehlivý, začal jsem používat tohle:

  /* STICKER BEGIN ! */  
  var stickyElement = $(".sticky"),
      stickyClass = "sticky-pin",
      stickyPos = stickyElement.offset().top, //Distance from the top of the window.
      stickyHeight;

  //Create a negative margin to prevent content 'jumps':
  stickyElement.after('<div class="jumps-prevent"></div>');
  function jumpsPrevent() {
    stickyHeight = stickyElement.innerHeight();
    stickyElement.css({"margin-bottom":"-" + stickyHeight + "px"});
    stickyElement.next().css({"padding-top": + stickyHeight + "px"}); 
  };
  jumpsPrevent(); //Run.

  //Function trigger:
  $(window).resize(function(){
    jumpsPrevent();
  });

  //Sticker function:
  function stickerFn() {
    var winTop = $(this).scrollTop();
    //Check element position:
    winTop >= stickyPos ?
      stickyElement.addClass(stickyClass):
      stickyElement.removeClass(stickyClass) //Boolean class switcher.
  };
  stickerFn(); //Run.

  //Function trigger:
  $(window).scroll(function(){
    stickerFn();
  });
  /* STICKER END ! */  

Css rules:
.sticky {
  transition: ease .3s;
}

.sticky-pin {
  position: fixed;
  top: 0;
}


DemoDownload

"Awesome Sticky Element Without Content Jumping"
Jsem stáhl odtud:
www.jqueryscript.net/tags.php?/Sticky
Mlocik97
Profil
Koukal:
jde to teda ohodne jednoduchšie


function anchor() {
    var shift = (window.pageYOffset || document.documentElement.scrollTop) - (document.documentElement.clientTop || 0);
    if (shift > 100) {
        $('<link>').appendTo('head').attr({
            rel: 'stylesheet',
            href: 'anchor-style.css'
        });
    }
}
window.onscroll = anchor;
Kajman
Profil
Mlocik97:
To je teda pěkně nesmyslný kód.
Gray blogger
Profil *
Mlocik97:
Pro mě je důležité že tenhle "Sticker" (jen pracovní pojmenování) je spolehlivý a jede mi dobře. Ten Sticky mi často nefungoval.
Koukal
Profil *
Jsem si nevšiml že jsem přihlášený na dvou různých oknech prohlížeče.
blaaablaaa
Profil
Mlocik97:
Chvilka scrollování a na stránce máš tunu přidaných css.
Mlocik97
Profil
blaaablaaa:
jo chyba tam odstranenie aj shift je menej 100
Koukal
Profil *
Zjistil jsem že ten aktuální "Sticker" co používám na Ipad nejede. Ale i na Iphone se to chová divně, že třeba aktivuje nebo deaktivuje toolbar pozdě. To jsem začal ladit na Chromu.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0