Question: In my HTML, this works

```
<div id="portfolio1" onclick="changeMainFrame('lib/portfolio1.html')">

```

to trigger the following function: 

```
function changeMainFrame(srcURL){
  var target = document.getElementById("mainFrame");
  target.src = srcURL;
}

```

I want to migrate it to my javascript doc. But this does not work:

```
document.getElementById("portfolio1").onclick = changeMainFrame("lib/portfolio1.html");

```

I can not find out how to fix this. Any hints? Cannot find a similar situation anywhere for something so simple yet time consuming.

Answer: 
I was able to achieve a sticky sidebar with the help of this [answer](https://stackoverflow.com/questions/36855473/position-fixed-not-working-is-working-like-absolute).

Basically, it states that in order to have a fixed sidebar that sticks to the our infinite scrolling page, we must remove the transform attribute
on the parent container. The reasoning is because the transform changes the positioning context from the viewport to the
rotated element. As a result, the "fixed" child element, behaves as if it has "absolute" positioning.

I added this to the sidebar.overrides file

```
/* Page Context */
.pushable:not(body) {
  transform: none;
}

.pushable:not(body) > .ui.sidebar,
.pushable:not(body) > .fixed,
.pushable:not(body) > .pusher:after {
  position: fixed;
}

```

This solution is meant for the base semantic-ui library. Since semantic-ui-react requires semantic-ui, this ends up working for semantic-ui-react sidebars as well.
Give a try with below code.

```
<Sidebar as={Menu} animation='overlay' icon='labeled' inverted vertical visible width='wide'>
       <Menu.Item as={Link} to="/admin">
          <Icon name='building' />
          Rubykraft
       </Menu.Item>
       <Menu.Item as='a'>
          <Icon name='user' />
          Shan
       </Menu.Item>
       <Menu.Item as='a'>
         <Icon name='user' />
         Vishnu
       </Menu.Item>
</Sidebar>

```