Zgjidhur: onscroll shtoni klasën jquery

ui.widget.ScrollTo

Problemi kryesor me përdorimin e miniaplikacionit ScrollTo është se mund të jetë e vështirë të kontrollohet se ku do të lëvizë kursori i përdoruesit kur ata klikojnë në miniaplikacion. Kjo mund ta bëjë të vështirë krijimin e një ndërfaqeje përdoruesi që është e lehtë për t'u përdorur.

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    //>=, not <=
    if (scroll >= 100) {
        //clearHeader, not clearheader - caps H
        $("#header").addClass("scrolled");
    } else {
        $("#header").removeClass("scrolled");  
    }  }); //missing );

Ky kod është shkruar në jQuery dhe përdoret për të ndryshuar klasën CSS të një elementi kur përdoruesi lëviz poshtë faqes.

Rreshti i parë krijon një funksion që do të ekzekutohet kur përdoruesi të lëvizë. Rreshti i dytë ruan vlerën se sa larg faqes ka lëvizur përdoruesi në një variabël të quajtur 'lëvizje'. Rreshti i tretë thotë se nëse vlera e 'scroll' është më e madhe ose e barabartë me 100, atëherë klasa CSS e elementit me një ID të 'header' duhet të ndryshohet në 'scrolled'. Nëse jo, atëherë duhet të kthehet në klasën e tij origjinale.

Import

jQuery ofron një mënyrë të përshtatshme për të importuar skedarë të tjerë JavaScript në projektin tuaj. Për ta bërë këtë, përdorni funksionin jQuery import(). Për shembull, për të importuar skedarin myfile.js në projektin tuaj, do të përdorni kodin e mëposhtëm:

importoni { myFile } nga './myfile.js';

Kjo do të përfshijë automatikisht myfile.js në objektin aktual të projektit tuaj dhe do ta bëjë atë të disponueshëm për përdorim në kodin tuaj.

Developer Tools

Ka një sërë mjetesh zhvilluesish që janë të disponueshme në jQuery. Këto mjete mund të përdoren për të korrigjuar kodin, për të inspektuar dhe modifikuar elementët DOM dhe më shumë.