scrollfix | jquery插件：滚动到某个位置固定起来

Thanks for looking at my question!

I'm very inexperienced with HTML and flat-out bad with JavaScript or jQuery. Couldn't find a solution to my problem anywhere.

The problem is that I have a website with a fixed navigation bar using a javascript and Jquery. Everything works when I open my html on my local machine but when I upload my website online the code stops working.

I don't know if this is enough information for anyone to get an idea of what the problem is but I figured it has to do with something I don't understand in the head, since the script and paths work fine when offline / local. (All the folders and files are in the same order and directories in my web-server)

https://thorned.xyz/ maybe the online website could help. The menu bar is not fixed when you scroll on a small page unlike when I open the html offline.

Thanks in advance!

I have implemented a table on my website with a fixed top row that will move together with the header navigation when viewers scroll the page. The table is included in a MaterializeCSS tab (https://materializecss.com/tabs.html).

To include the div within a specific tab, the table is wrapped in a div with the id of "tab1". However, when I include this id, the top row of the table for some reason resizes to less than the full width of the table. This error doesn't occur as long as I don't include the id. I tried to replicate the error in a JSFiddle but this is a bit complex due to all the coding I have on the site. I am certain that the error is due to the Javascript code for setting the fixed table row and was hoping that someone would be able to spot what is causing this.

The table header is fixed, but it is at the top of the page after scrolling. It works exactly how I want it, except the thead is fixed in the wrong place.

The table has an overflow-x:auto and the TD are using white-space:nowrap so the table expands to handle the content.

I need it to be fixed 140 pixels from the top or right below the Page Header. I cant figure out how to offset this... Its close, but needs to take into account the overflow...

Here is JSFIDDLE - https://jsfiddle.net/rbla/1Ljuycbe/1/

Please look at the FIRST table... and the problem is with the OVERFLOW-X:AUTO - I need the cloned table to reflect this as well...

JQUERY

I try to create a fixed table-header with the following code from this question, but with checkboxes and they don't display properly. It works on fiddle example but I'm using Symfony3 and Twig, so it's possible that's causing the problem.

How can I solve this?

I have a page where I show an image within some defined dimensions. I now want to invoke Google maps on a button click and show it within that dimensions itself. How can I do it in JavaScript and Angular JS?

P.S. I suppose it can be done by creating new JSP and link it to the button. But I want to update only the image portion not the whole page since it will take more time to load.

I am building a google map and I would like to have some information show when the mouse is over a marker and then more detailed information when the user clicks on the map. I have found a solution for it by adding two infowindows.

html