Scrolling with javascript and 'position: sticky' div - javascript

I have a react app that basically is a container with 2 columns. The left column is a list and the right column is a div with position sticky(It's actually a map with pins. Must be fixed on the screen). Each list item is a clickable in the right column. When the user clicks on the title, the screen must be scrolled to display the current list item on left column.
The problem is that when the screen scrolls to an item at the end of the list, the right column also scrolls and doesn't stay fixed.
I would like to keep the right column always fixed when the user clicks on some title, regardless of the element's position in the left column list.
Any idea how to fix it?
https://codesandbox.io/s/scrolling-with-react-yq81r

I change a couple of code on CodeSandbox.
.right {
background-color: #cacaca;
}
.right ul {
top: 0;
position: sticky;
}
If I understood correctly this gonna work.

Related

animation of icon under nav menu

I have asked a few questions about this project before. I have created a mock webpage as part of a class evaluation.
You can find the page on my github here: dtarvin.github.io/davidTarvinEvaluation/index.html
There's a nav menu at the bottom right corner of the page. When you highlight over one of the menu items, a paw icon slides in under the menu item, and the menu item moves up vertically. Then when you move to another item, the paw slides to that next item, which moves up vertically, while the previous item moves back down to its original position.
Two problems: First, when I have the paw under an item, if I have my cursor pointer to the left or right of the paw the menu item stays raised in height. However, if my pointer is on the paw itself, the menu item returns to its original position. How do I fix this?
Second, when I move from one menu item to another, say from Home to About, the Home drops down before the paw has moved out from under it, so that the paw ends up dragging across the word Home. Is there any way to fix it so that this does not occur?
Thanks!
1) add the css property of pointer-events: none; to #paw.
#paw {
//other properties...
pointer-events: none;
}
2) add a top property value for li span when not hovered and add a transition delay.
li span {
position: relative;
transition: top .5s 0.5s; //this has a 0.5s delay
top: -0vh;
}

Horizontally scrolling table with fixed first column

I want to create a table with a fixed first column so that when the user scrolls horizontally, the first column stays where it is, making it easier to interpret the data in the table. I gave the first column position: absolute but the issue with that is the <td> elements don't resize when the content takes up multiple lines. How do I fix this? I wouldn't mind a solution using javascript for this.
What I have so far: http://jsfiddle.net/Yw679/778/
Also, would it be possible to make the <thead> fixed also so that it doesn't go out of view when the user scrolls down but moves with the rest of the columns when the user scrolls horizontally?
I added a new column with class style-hidden for each td and th and some tricky css like this. I hope this will help:
.style-hidden{
width: 0;
opacity: 0;
display: block;
}
JSFiddle

div (menu) not pushing div (maincontent)

For a website i'm making I have a little problem. I have a mobile menu which activates when I press the menu button (done with javascript).
I want it to push the div with the 3 blocks (the maincontent div) down, but sadly it's not doing what it's supposed to.
I have tried everything with positions and so on, without success. You can check out the website at dev.hotelkom.nl
It's not working because your main menu is positioned absolutely and its parent has a fixed height. Also your wrapper-content is positioned absolutely hence it's not moving.
Few reasons how you may fix it:
.mainmenu {
position: relative;
height: auto;
}
.wrapper-content {
position:relative;
}
Apply these properties on mobile.

Prevent jQuery slidedown menu from pushing down elements in other columns?

My current responsive site has slide down menus. I intend to make it so that as the window gets wider the items organize into columns (1,2, and 3). This much is working but when I slidetoggle an element in the first column, the elements in the first column goes down as well. Sometimes the elements hop from one column to the other.
I just need a general idea of what to do?
the menu items are floated
the menus themselves are not
Give your columns a position of relative with some padding and your menus a position of absolute. Then you can position your menu's above the text in the columns, and they won't push the text down when you use slideToggle()
.col{
padding:20px;
position:relative;
}
.menu{
position:absolute;
top:0;
}
Here's a jsFiddle to show it in action

Display list item over a div

I have a menu bar, whose menu li stretch down on mouse hover. It pushes sidewards a div below this menu bar div. But I want those stretch down lis to display over the mentioned div, without pushing it sidewards.
You can have a look at what I am trying to tell here.
Anybody got a solution?
http://jsfiddle.net/bpu2r/
I've simply added float: left; to the menu and clear: both; to the container.

Categories