Javascript Floating div care plutește întotdeauna în partea de sus atunci când se derulează în jos (Programare, Javascript, Html, Extensie Google Chrome)

user63898 a intrebat.
a intrebat.

Care este modul corect de a construi un simplu flotant divs folosind Javascript (sau CSS în mod programatic)care este deasupra și întotdeauna vizibil atunci când se derulează în jos?

Acum am văzut exemple de genul acest. Când derulați în jos vedeți div-ul sărind și o întârziere. Vreau ca acesta să fie în mod constant în partea de sus atunci când conținutul paginii nu este al meu ,
scriptul va fi injectat prin intermediul chrome extention

se poate face?ceva de genul acest ; dar mai puțin complex și să nu depindă de conținutul paginii

Comentarii

  • Cred că sunt multe chestii de genul ăsta pe google, nu ai putut găsi acolo? –  > Por gdoron o susține pe Monica.
  • Nu cred că ai nevoie de javascript aici : ) Ai nevoie doar de position: fixed –  > Por thinklinux.
  • da, am găsit câteva, dar nu sunt ceea ce am nevoie, nu pot să înfășor conținutul paginii cu div-uri pentru început, iar majoritatea exemplelor folosesc jQuery…  > Por user63898.
2 răspunsuri
CᴴᵁᴮᴮᴮʸNᴵᴺᴶᴬ

Cu class sau id al elementului pe care doriți să îl păstrați în partea de sus, trebuie să aplicați câteva reguli CSS,

de exemplu, dacă clasa elementului dvs. este .topnavigation

ați putea face următoarele în jQuery

<style>
.topnavigation {
    width:;/* add the width here */
    position:static;
}
.topnavigation.scrolling {
    position:fixed;
    top:0px;
}
</style>
<script>
$(window).scroll(function () { 
    if($(this).scrollTop() > 50) // change 50 to what you want (work out how far the nav is from the top of the page alraedy and add it there, that'll make it smoother transition)
    {
        $('.topnavigation').addClass('scrolling');
    } else {
        $('.topnavigation').removeClass('scrolling');
    }
});
</script>

Dacă nu puteți utiliza jQuery, puteți face următoarele cu javascript normal:

Actualizat: 06 Jan 2017Am actualizat acest lucru pentru a utiliza metodele document.querySelector și Element.classList. Toate browserele moderne și IE 10 > acceptă aceste metode.

window.addEventListener('scroll',checkPosition,false);
function checkPosition()
{
    // #theid or #theclass or standard element selector
    var xNAV = document.querySelector("#topnav"); 
    if(window.scrollY > 50)
    {
        xNAV.classList.add("scrolling");
    } else {
        xNAV.classList.remove("scrolling");
    }
}

Comentarii

  • întrebare rapidă doar dacă puteți să-mi dați un indiciu , dacă îmi place să o fac, dar acum div-ul va fi întotdeauna în partea de jos? –  > Por user63898.
  • ohh ok, atunci ai putea să schimbi css-ul de la top:0px; la bottom:0px; –  > Por CᴴᵁᴮᴮᴮʸNᴵᴺᴶᴬ.
  • @CᴴᵁᴮᴮᴮʸNᴵᴺᴶᴬᴬ, Acest lucru adaugă scrolling clasa de mai multe ori. –  > Por Iulian Onofrei.
Rene Pot

Cu JavaScript, determinați când doriți să fie flotant, apoi adăugați css: position:fixed