以下のようにしたら固定はできたのですが、ヘッダを固定しているため、その分上の方が隠れてしまいます。
どこを変えたら良いのでしょうか?
javascript
1(function(jquery) { 2 jquery(document).ready(function() { 3 var main = jQuery('#main'); 4 var side = jQuery('#side'); 5 var wrapper = jQuery('#scrollbox'); 6 7if (main.length === 0 || side.length === 0 || wrapper.length === 0) { 8return; 9} 10 11 var w = jquery(window); 12 var wrapperHeight = wrapper.outerHeight(); 13 var wrapperTop = wrapper.offset().top; 14 var sideLeft = side.offset().left; 15 16 var sideMargin = { 17 top: side.css('margin-top') ? side.css('margin-top') : 0, 18 right: side.css('margin-right') ? side.css('margin-right') : 0, 19 bottom: side.css('margin-bottom') ? side.css('margin-bottom') : 0, 20 left: side.css('margin-left') ? side.css('margin-left') : 0 21 }; 22 23 var winLeft; 24 var pos; 25 26 var scrollAdjust = function() { 27 sideHeight = side.outerHeight(); 28 mainHeight = main.outerHeight(); 29 mainAbs = main.offset().top + mainHeight; 30 var winTop = w.scrollTop(); 31 winLeft = w.scrollLeft(); 32 var winHeight = w.height(); 33 var nf = (winTop > wrapperTop) && (mainHeight > sideHeight) ? true : false; 34 pos = !nf ? 'static' : (winTop + wrapperHeight) > mainAbs ? 'absolute' : 'fixed'; 35 if (pos === 'fixed') { 36 side.css({ 37 position: pos, 38 top: '', 39 bottom: winHeight - wrapperHeight, 40 left: sideLeft - winLeft, 41 margin: 0 42 }); 43 44 } else if (pos === 'absolute') { 45 side.css({ 46 position: pos, 47 top: mainAbs - sideHeight, 48 bottom: '', 49 left: sideLeft, 50 margin: 0 51 }); 52 53 } else { 54 side.css({ 55 position: pos, 56 marginTop: sideMargin.top, 57 marginRight: sideMargin.right, 58 marginBottom: sideMargin.bottom, 59 marginLeft: sideMargin.left 60 }); 61 } 62 }; 63 64 var resizeAdjust = function() { 65 side.css({ 66 position:'static', 67 marginTop: sideMargin.top, 68 marginRight: sideMargin.right, 69 marginBottom: sideMargin.bottom, 70 marginLeft: sideMargin.left 71 }); 72 sideLeft = side.offset().left; 73 winLeft = w.scrollLeft(); 74 if (pos === 'fixed') { 75 side.css({ 76 position: pos, 77 left: sideLeft - winLeft, 78 margin: 0 79 }); 80 81 } else if (pos === 'absolute') { 82 side.css({ 83 position: pos, 84 left: sideLeft, 85 margin: 0 86 }); 87 } 88 }; 89 w.on('load', scrollAdjust); 90 w.on('scroll', scrollAdjust); 91 w.on('resize', resizeAdjust); 92 }); 93})(jQuery); 94
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。