A little help needed with jquery – [a continuous synchronous scroll sidebar]

A little help needed with jquery – [a continuous synchronous scroll sidebar]

Hi. My scenario is like this – in my web application I’m building, in one of the pages, there’s supposed to be a small side segment like a div which will move along with the page as it is scrolled down or up gradually. I’ve tried to put together the code after putting some amount of observation into the scenario. In my MVC views, have a _layout page (similar to a master page) where I’ve created the sidebar div.

 

Here’s what I did –


This is the sidebar div ::


<div id="sidebar" style="padding:7px ;margin-top:30pxz-index:1001border-radius:9pxcolor:midnightbluebackground:linear-gradient(60deg, rgb(201, 196, 246), #c6e2d0)float:rightposition:absolutemargin-left:1020pxwidth:225px">

  1.             Check out the Shop Facility to buy new art and digital media content everyday. Everytime you visit the shop,

                we uphold a new work for sale.

                <br/><br/>

                <p style="text-align:center">

                    <a href="@Url.Action("ArtShop""Shop")" style="font-size:26pxcolor:#067aa0">Click Here</a>

                </p>

            </div>


This is the jquery I improvised ::


$(document).ready(function () {

  1.             var sidebar = $("#sidebar");

                var window = $(window);

                var offset = sidebar.offset();

                var topPadding = 140;

     

                $(window).scroll(function () {

                    if (window.scrollTop() > offset.top) {

                        sidebar.stop().animate({

                            marginTop: window.scrollTop() - offset.top + topPadding

                        });

                    }

                    else {

                        sidebar.stop().animate({

                            marginTop: 0

                        });

                    }

                });

            });

All would seem fine apparently but is not as you can guess. The div is not moving as I scroll the page. Errors I observed from the web browser inspection console --

Uncaught ReferenceError: $ is not defined at localhost/:72


Strange cuz I added the reference of jquery file in my bundleConfig file well enough (people acquainted with the .NET MVC practices can easily relate).

 

SO what’s the ruckus here. Why wouldn’t the method fire why doesn’t it get the cross-reference of the jquery file. I suppose that should straightaway solve it. Isn’t it? Or is it?

What do I do now. The above jquery section I wrote in the head section of the _layout view itself. I was making a speculation if I make a complete different javascript file like site_sript.js where I put the thing and add it in the scripts bundle – would that neatly resolve the issue?
Main thing is I want to get this working – the scrolling side bar.

 Help Please my folks.