https://communityserver.org/user_data/packages/default/js/newRegistration.js

1$(document).ready(function() {
2  //---
3  //サイドナビの新規登録ボタン固定
4  //---
5
6  var fixedSidebar = (function() {
7    var navi,
8      naviHeight,
9      naviNextElement,
10      naviMarginTop,
11      naviMarginBottom,
12      naviPrevElementMargin,
13      naviHeightAll,
14      main,
15      mainHeight,
16      main_scroll,
17      fixed_start,
18      fixpx_end_top,
19      displayWidth,
20      tabletWidth;
21    return {
22      run : function() {
23        //ブラウザ幅を取得
24        displayWidth = $(window).width();
25
26        // サイドバーの固定するレイヤー
27        navi = $('.side-contents_new-registration');
28
29        // サイドバーの固定するレイヤーの高さを取得
30        naviHeight = navi.height();
31
32        // サイドバーの固定するレイヤーの下にある要素
33        naviNextElement = navi.next('div');
34
35        // サイドバーの固定するレイヤーのが固定されたときのMargin-top
36        naviMarginTop = 60;
37
38        // サイドバーの固定するレイヤーのmargin-bottom
39        naviMarginBottom = 20;
40
41
42        // サイドバーの固定するレイヤーの上にある要素のmargin-bottom
43        naviPrevElementMargin = 20;
44
45        // メインのマージンを含めた高さ
46        naviHeightAll = naviHeight + naviMarginBottom + naviPrevElementMargin;
47
48        //タブレットのブレークポイント
49        tabletWidth = 959;
50
51        //#main_columnがサイドバーに比べて上に飛び出している分を相殺する長さ
52        surplusMargin = 60;
53
54        main = $('#main_column');
55        if(displayWidth > tabletWidth) {
56          this.refresh();
57        }
58
59      },
60      refresh : function() {
61        navi.css({
62        position : 'relative',
63        top : 'auto'
64      });
65      var navi_top = navi.offset().top - parseInt(navi.css('margin-top'));
66      var main_top = main.offset().top - parseInt(main.css('margin-top'))-surplusMargin;
67      // 開始位置：ナビのTOP
68      fixed_start = navi_top;
69      // スクロールする上限
70      fixpx_end_top = main_top + main.outerHeight(true) - navi.outerHeight(true);
71      main_scroll = fixpx_end_top;
72
73      if (navi_top + navi.outerHeight(true) < main_top + main.outerHeight(true)) {
74        $(window).off('scroll', _onScroll).on('scroll', _onScroll);
75      } else {
76        $(window).off('scroll', _onScroll);
77      }
78        $(window).trigger('scroll');
79      },
80      removeStyle : function() {
81        navi.css({
82          position : 'static'
83        });
84        $(window).off('scroll', _onScroll);
85      }
86    };
87
88    function _onScroll() {
89      var fix_end_value = 1100;
90      //サイドバーの上の何ピクセルから登録エリアが再出現するか
91      var ws = $(window).scrollTop() - fix_end_value;
92      if (ws > fixpx_end_top - fix_end_value) {
93        // 固定する上限
94        navi.css({
95          position : 'fixed',
96          top : (fixpx_end_top - ws) - naviMarginTop - fix_end_value +  'px'
97        });
98      } else if (ws > fixed_start) {
99      // 固定中間
100        navi.css({
101          position : 'fixed',
102          top : naviMarginTop + 'px'
103        });
104        naviNextElement.css({
105          marginTop : naviHeightAll + 'px'
106        });
107      } else {
108        //　固定開始まで
109        navi.css({
110          position : 'relative',
111          top : '0px'
112        });
113//            setTimeout(function(){
114//                navi.css({
115//                  position : 'relative'
116//                  //top : '0px'
117//                });
118//            },200);
119        naviNextElement.css({
120          marginTop : '0px'
121        });
122      }
123    }
124
125  function removeStyle() {
126    navi.css({
127      position : 'relative',
128      top : '0px'
129    });
130  }
131})();
132
133  $(window).on('load resize', function(){
134    //ブラウザ幅を取得
135    var displayWidth = $(window).width();
136
137    //タブレットのブレークポイント
138    var tabletWidth = 959;
139
140
141    //PCとモバイルの挙動切り替え
142    //--PC
143    if(displayWidth > tabletWidth) {
144      fixedSidebar.run();
145
146    //--モバイル
147    } else {
148      fixedSidebar.removeStyle();
149    }
150  });
151
152});