$(window).srcoll() is not working in wix's CUSTOM HTML Component.

Ask the community
,
1

Hi,
I hope you are doing good and having a good day.
I’m having a Lil problem in Wix. Please help me out to fix it.

I added the CUSTOM HTML, CSS, and jquery code using HTML COMPONENT which somehow works fine.

The issue is $ (window). scroll (function () { some code}); is not working while the $ (window).ready(function () { same code of scroll() });. I wonder why just this is happening. Please check the code below.

.main-accom { display : flex ; flex-wrap : wrap ; width : 100% ; justify-content : center ; padding-top : 50px ; gap : 2% ; } .heading { font-family : 'Red Hat Display' , sans-serif ; font-size : 35px ; font-weight : 900 ; color : #22265B ; letter-spacing : -1px ; } .right-accom { display : flex ; justify-content : center ; flex-wrap : wrap ; width : 800px ; } .container-wraper { display : flex ; justify-content : space-between ; width : 300px ; border-left : 3px solid black ; padding : 0 30px ; margin : 10px ; } .wraper-img { display : flex ; align-items : center ; } .wraper-img img { width : 48px ; } .wraper-info { display : flex ; flex-direction : column ; justify-content : space-between ; } .wraper-counter { font-family : 'Red Hat Display' , sans-serif ; font-weight : 900 ; color : #000 ; font-size : 38px ; letter-spacing : -1px ; height : 40px ; margin-top : 0 ; } .wraper-heading { font-family : system-ui , 'Open Sans' , sans-serif ; } @media only screen and ( max-width : 500px ) { .heading { font-size : 25px ; } } @media only screen and ( max-width : 350px ) { .container-wraper { max-width : 230px ; } }

Our Accomplishments

7893

Properties Inspected

7259

Satisfied Clients

8345670

Sq ft Covered 

            </p> 
        </div> 
        <div  class ="wraper-img"></div> 
    </div> 
    <div  class ="container-wraper"> 
        <div  class ="wraper-info"> 
            <h3  class ="wraper-counter count"  data-target ="87">87</h3> 
            <p  class ="wraper-heading"> 
                Successful Projects 

            </p> 
        </div> 
        <div  class ="wraper-img"></div> 
    </div> 
    <div  class ="container-wraper"> 
        <div  class ="wraper-info"> 
            <h3  class ="wraper-counter count"  data-target ="23945">23945</h3> 
            <p  class ="wraper-heading"> 
                Inspection Hours 
            </p> 
        </div> 
        <div  class ="wraper-img"></div> 
    </div> 
    <div  class ="container-wraper"> 
        <div  class ="wraper-info"> 
            <h3  class ="wraper-counter count"  data-target ="27">27</h3> 
            <p  class ="wraper-heading"> 
                Certified Inspectors 
            </p> 
        </div> 
        <div  class ="wraper-img"></div> 
    </div> 
</div>

This is code that does not work. but the below code work only have a change of ready()

Please share your views and suggestion to fix this out.
Thanks

2

$ (window) only works in that HTML component scope, not to the parent as it is “sandboxed”

3

It’s because you have it nested in the main function most likely. So it can only work within the scope of the main function. Just move it to where it isn’t nested in the main function and it should trigger.