Solved: onscroll add class jquery

ui.widget.ScrollTo

The main problem with using the ScrollTo widget is that it can be difficult to control where the user’s cursor will move when they click on the widget. This can make it difficult to create a user interface that is easy to use.

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

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

This code is written in jQuery and is used to change the CSS class of an element when the user scrolls down the page.

The first line creates a function that will be executed when the user scrolls. The second line stores the value of how far down the page the user has scrolled in a variable called ‘scroll’. The third line says that if the value of ‘scroll’ is greater than or equal to 100, then the CSS class of the element with an id of ‘header’ should be changed to ‘scrolled’. If not, then it should be changed back to its original class.

Import

jQuery provides a convenient way to import other JavaScript files into your project. To do this, use the jQuery import() function. For example, to import the file myfile.js into your project, you would use the following code:

import { myFile } from ‘./myfile.js’;

This will automatically include myfile.js in your current project scope and make it available for use in your code.

Developer Tools

There are a number of developer tools that are available in jQuery. These tools can be used to debug code, inspect and modify DOM elements, and more.