Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Avoid affix element is higher than view port
  • Loading branch information
afc163 committed Dec 10, 2017
1 parent e13c6d8 commit 31a0654
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 1 deletion.
4 changes: 3 additions & 1 deletion components/affix/index.tsx
Expand Up @@ -157,10 +157,12 @@ export default class Affix extends React.Component<AffixProps, AffixState> {
if (scrollTop > elemOffset.top - (offsetTop as number) && offsetMode.top) {
// Fixed Top
const width = elemOffset.width;
const top = targetRect.top + (offsetTop as number);
this.setAffixStyle(e, {
position: 'fixed',
top: targetRect.top + (offsetTop as number),
top,
left: targetRect.left + elemOffset.left,
maxHeight: `calc(100vh - ${top}px)`,
width,
});
this.setPlaceholderStyle({
Expand Down
1 change: 1 addition & 0 deletions components/affix/style/index.less
Expand Up @@ -3,4 +3,5 @@
.@{ant-prefix}-affix {
position: fixed;
z-index: @zindex-affix;
overflow: auto;
}

2 comments on commit 31a0654

@afc163
Copy link
Member Author

@afc163 afc163 commented on 31a0654 Dec 10, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

xx

@shtam
Copy link

@shtam shtam commented on 31a0654 Dec 18, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The overflow:auto breaks any box-shadow on your containing divs, e.g.:

<Affix> <Header style={{ boxShadow: '0 2px 10px rgba(0,0,0,.2)' }}>Hello</Header> </Affix>

Any suggestions?

Please sign in to comment.